关于定位布局中的相对定位
程序员文章站
2022-05-06 09:01:26
...
关于CSS中定位布局的相对定位-relative
相对定位一个最大特点是:自己通过定位跑开了还占用着原来的位置,不会让给他周围的诸如文本流之类的对象。相对定位也比较独立,做什么事它自己说了算,要定位的时候,它是以自己本身所在位置偏移的(相对对象本身偏移)。
相对定位常与绝对定位结合用,一般是给父级设定相对定位方式,子级元素就可以相对它进行方便的绝对定位了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .orange{ width: 400px; height: 300px; background-color: orange; } /*红色区块设置为相对布局,虽然往下便宜150PX,但仍占据了位置,使得黄色,绿色无法浮动到最左边*/ .red{ width: 100px; height: 100px; background-color: red; float: left; position:relative; margin-top: 150px; } .yellow{ width: 100px; height: 100px; background-color: yellow; float: left; } .green{ width: 100px; height: 100px; background-color: green; float: left; } /*蓝色区块相对自身偏离了30px,10px,但黑色区块的位置是以蓝色之前的位置向下偏移10px*/ .blue{ width:50px; height: 50px; background-color: blue; position: relative; top:30px; left:10px; } .black{ width:30px; height: 30px; background-color: black; margin-top: 10px; } </style> </head> <body> <p class="orange"> <p class = "red"> <p class = "blue"></p> <p class = "black"></p> </p> <p class = "yellow"></p> <p class = "green"></p> </p> </body> </html>
更多关于定位布局中的相对定位 相关文章请关注PHP中文网!
上一篇: PHP中得到指定的时间段