position與float
阿新 • • 發佈：2020-11-16
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內顯示。
<!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; } </style> </head> <body> <div class="parentBox"> <span>relative</span> <div class="childBox">fixed</div> <div class="childBox childBox2">absolute</div> </div> </body> </html>