CSS ?? ??
1. CSS ?? ??
?? ??? ?? ??? ?????. ?? ?? ?? ??? ?? ?? ?? ?? ??, ?? ?? ?? ?? ??? ???? ????? ?? ??? ??? ? ????. ???? ? ??? ??? ???????.
CSS?? ? ?? ?? ?? ?? ????? ????.
?? ??:
HTML?? ??? ?? ??? ?? ???? ????
??:
?? ??? ??? ????? ?? ??? ?? ?? ??? ???? ?? ??? ???? ????? ??? ? ????.
?? ?? ??:
?? ?? ??? ??? ??? ????? ??? ????? ??? ??? ???? ????. ?? ??? ??? ?? ??? ??? ????? ??? ??? ?? ?? ?? ?? ??? ??? ???? ?? ?? ??? ????.
?? ?? ?? :
??, ??, ??, ???? ???? ??? ??, ??, ?? ?? ?? ??? ?????
, ?? ? ? ?? ??? ???? ??? ?? ???? ??????.
overflow? ??? ?? ??? ?? ? ???? ??? ?????.
clip? ??? ?? ??? ????, ?? ?????.
vertical-align? ??? ?? ??? ?????.
z-index? ??? ?? ??? ?????.
???? position ??? ???????. ???? ?? , ?? html ??? CSS ??? ????.
html:
<div class="position1"></div> <p>this is php中文網(wǎng)</p> <p>this is php中文網(wǎng)</p> <p>this is php中文網(wǎng)</p> <p>this is php中文網(wǎng)</p>
CSS:
.position1{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}?? ?? ?? ??? ??? ? ? ????.
CSS?? ?? ?? ??? ??? ? ???? 60px ???
position: relative; left: 60px;
??? ??? ????.
???? ??? ????? ?????.
position: absolute;
??? ??? ????.
??? ?? ? ?? ?? ?? ??? ??? ? ????. ?? ? ??? ??? ?? ????. ??, ??? ????? ?? ??? ???? ??? static?? ???? ???? ??? ????.
?? ??? ???????
? div ?? ??? ?????: HTML
<div class="position1"></div> <div class="position2"></div>
CSS add:
.position2{
width: 100px;
height: 100px;
background-color: aquamarine;
position: relative;
left:10px;
top: 10px;
}?? ??? ?????:
??? z-index? ???? ?? ?? ??? ??? ? ????:
???? CSS ??? ???? ??? ?????.
z-index: 2;? ?????.
?? 2? ??:z-index: 1; ?? ??? ????:?
