CSS3網頁定位技術(3)——fixed浮動定位
三:
Position還有第三個值:fixed
Fixed和absolute差不多,有一點小的不同。
你會發現一些廣告的頁面,無論你怎樣滾動滑輪,廣告是不東的。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } div{ height: 200px; width: 50px; background-color: red; color: #fff; } </style> <title></title> </head> <body> <div>前端前端前端前端前端前端前端前端前端</div> <br>*500 </body> </html>
現在又一個要求就是讓紅色的方塊不東,無論我怎麼滾動滑鼠。
div{
height: 200px;
width: 50px;
background-color: red;
color: #fff;
position: fixed;
left: 0;
top: 100px;
}
這樣就可以了!!
還有一個就是無論你的螢幕多大,他的廣告都是居中不東的。
div{
height: 100px;
width: 100px;
background-color: red;
color: #fff;
position: fixed;
left: 50%;
top: 50%;
}
現在是小方塊的左頂點在文件的50%,50%,怎麼挪半個身位呢?
div{
height: 100px;
width: 100px;
background-color: red;
color: #fff;
position: fixed;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
這樣就可以了!