CSS ????

CSS Positioning

CSS Position Positioning ??

? ???? ?? ??? Position ??? ?????. ? ??? ??? ?? ?? ??? ??? ? ????. ???.

1. ??? ??: ???? ??? ????? ?????.

2. ?? ?? ?? ??: ??, ??, ??, ???? 4?? ?? ?? ??? ?????.

3. ?? ??: ??? ??? ?????.

1. ??

1.1 ??

Position ??: ??? ?? ?? ??? ?????. ?, ??? ?? ??? ?????? ???? ???? ?? ??? ?????.

1.2 ?? ? ??

①??: ?? ??? ????? ??? ??? ??? ?? ??? ?????. ?? ??? ?? ??? ?? ??? ?? ?????(??? ???? ??). ??? ??? ?? ?? ?????.

②???: ?? ?? ??; ?? ??? ?????? ???? ?? ?? ??? ???? ?? ??? ?? ??? ? ??? ????. ?? ??? ?? ??? ?? ???? ? ??? ?? ?????.

③??: ?? ??. ???? ????? ??? ??? ??? ? ??? ???? ????.

④static: ???, ?? ????.

1.3 ?? ??

?? ??? ?? ???? ??? ???? ??? ???. ? ??? ??? ??? ????? ?? ??(??)? ???? ???. :static? ?? ???? ????.):

①left: ?? ??? ??? ?? ?? ??? ????? ??? ?? ?? ?????.

②right: ?? ???? ??? ?? ?? ??? ???? ??? ?? ?? ?????.

③top: ?? ?? ??? ?? ?? ??? ??? ??? ?? ?? ?????.

IV??: ?? ??? ??? ?? ?? ??? ?? ??? ?? ?? ?????.

? ??? ?? ??(??: px)? ? ????.

??:??

?? ??? ???? ? ??? ??? ?? ??? ?????. ?? ??? ?? ??? ?? ??? ?? ?????(??? ???? ??). ??? ??? ?? ?? ?????. position:relative

position:relative

?? ?? ??? ?? ??? ????? ???? ??? ?? ??? ???? ??? ????. ?? ??? ?? ??. ?? ??? ?? ??? ?? ???? ? ??? ?? ?????.

??:??

?? ?? ??. ???? ????? ??? ??? ??? ? ??? ???? ????.

??? ??:

①??? ?? ????: dz ??? ???? ?? ????.

②?? QQ ??? ??.

??:??

?? ?? ??? ? ??? ?? ?? ?? ???? ?????.

??? ??:

IE6? ?? ??.

???? ?? ??

position ??? ???? ??? edge ??? ??:

①?? ? ??: ? ? ?? ???? ?? ???? ??, ? ??? ???? ??? ????? ???? ??? ??? ?????.

②??: ? ?? ???? ???? ??? ?? ????? ? ??? ??? ?? ???? ???? ??? ??? ???? ????.

????

???? ??

??? ??

<html> <head> <meta charset="utf-8"> <title>position</title> <style type="text/css"> div { height: 200px; width: 300px; border-color: Black; border-style: solid; border-width: 1px; } #a { position:absolute; left:900px; top:150px; } #b { position:relative; left:500px; top:100px; } #c { position:fixed; left:970px; top:400px; } #d { position:static; background-color:Window; } </style> </head> <body> 　　<div id="a" > 　　　　div-a<br /> 　　　　position:absolute;<br /> 　　　　絕對定位；脫離文檔流，遺留空間由后續(xù)元素填充。　　</div> 　　<div id="b" > 　　　　div-b<br /> 　　　　position:relative;<br /> 　　　　相對定位；不脫離文檔流，只改變自身的位置，在文檔流原先的位置遺留空白區(qū)域。　　</div> 　　<div id="c" > 　　　　div-c<br /> 　　　　position:fixed;<br /> 　　　　固定定位；固定在頁面中，不隨瀏覽器的大小改變而改變位置。　　</div> 　　<div id="d">默認(rèn)定位方式</div> 　　<input type="text" value="input1" /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html>

?????? ???

????