position与float
position:fixed/absolute和float的关系:
元素设置position:absolute / fixed后,float属性是没有效果的。
对于position: absolute元素,其包含元素为设有position:relative的元素;
对于position: fixed元素,其包含元素为HTML,而HTML视为窗口大小,如果html的范围大于body,可设置html最大宽度值,并body设置transform: translateX(0)属性,则fixed元素可位于body内。
对于position: relative元素,其包含块同absolute一样,但对float不为none值情况下,会先进行浮动再设置position的left或right。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"/> <title>Title</title> <style> html { position: relative; height: 100%; max-width: 540px; margin: 0 auto; background: #eee; } body { width: 100%;height: 100%; margin: 0 auto; background: #fff; transform: translateX(0); } .parentBox { position: relative; width: 300px;height: 150px; border: 1px dotted #000; } .childBox { position: fixed; float: left; top: 0; right: 0; width: 100px; height: 100px; border: 1px solid #fc0; } .childBox2 { position: absolute; float: left; } .childBox3 { position: relative; right: 50px; float: left; } </style> </head> <body> <div class="parentBox"> <span>relative</span> <div class="childBox">fixed</div> <div class="childBox childBox2">absolute</div> <div class="childBox childBox3">relative<br/>right:50px<br/>float:left</div> </div> </body> </html>