CSS ??
CSS??? Position ??? ?? ???? ?? ?? ?? ??? ?? ?? ??? ????. ?? ??? ??? ?? ????. ?? ??? ???? ?? ????? ? ????.
Position ??: ??? ?? ?? ??? ?????. ?, ??? ?? ??? ?????? ???? ???? ?? ??? ?????.
?? ?? ?:
??: ?? ?? ??? ?? ? ?? ??? ???? ?? ?? ?? ??? ?????. ?? ??? ?? ?? ?????. ??? ??? "left", "top", "right" ? "bottom" ??? ?? ?????.
relative: ????? ??? ??? ??? ???? ?? ??? ???? ?????. ??? "left:20"? ??? ?? ??? 20??? ?????.
??: ???? ?? ???? ?? ??? ?? ??? ?????.
??: ??????. ?? ??? ??? ??? ?? ??(??, ??, ??, ??? ?? Z-?? ?? ??)?? ?????. ??? ??? "left", "top", "right" ? "bottom" ??? ?? ?????.
inherit: ?? ??? ?? ?? ???? ????? ?????.
?? ????? ???? ? ?? ??? ??? ??? ?????.
?? ?? ??:
①??: ???? ??? ?? ?? ?????. left of the element ??? ????? ??? ?? ????.
②right: ?? ???? ??? ?? ?? ??? ???? ??? ?? ?? ?????.
③top: ?? ?? ??? ?? ?? ??? ??? ??? ?? ?? ?????.
IV??: ?? ??? ??? ?? ?? ??? ?? ??? ?? ?? ?????.
? ??? ?? ??(??: px)? ? ????.
?? ??
?? ?? ; ????? ?? ???? ??? ??? ??? ?? ??? ?????. ?? ??? ?? ??? ?? ??? ?? ?????(??? ???? ??). ??? ??? ?? ?? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>??: ??? Sub1? ?? ??? ???? ??? Sub1? ??? ????? ?? Div Sub2? Sub1? ??? ?????? Sub1? Sub2? ?????.
?? ?? ?? ??
?? ?? ??? ?? ??? ????? ???? ????. ?? ??? ?? ??? ??? ???? ?? ??? ?????. ?? ??? ?? ??? ?? ???? ? ??? ?? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>??: Sub1? ????? Sub2? ??? ??? ?? ?? ??? Sub2? ???? ?? ? ? ????. ???? Div? ??? ??? ?? ?????. ????? Sub1? ?? ??? ???? ???.
?? ??
?? ??? ???? ????? ??? ??? ??? ? ??? ???? ????.
<meta charset="utf-8">
<title>實(shí)例</title>
<style type="text/css">
html body
{
margin: 0px;
padding: 0px;
}
#parent
{
width: 200px;
height: 200px;
border: solid 5px black;
padding: 0px;
position: relative;
background-color: green;
top: 15px;
left: 15px;
}
#sub1
{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 15px;
left: 15px;
}
#sub2
{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
top: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="parent">
<div id="sub1">
</div>
<div id="sub2">
</div>
</div>
</body>
</html>??: Sub2? ?? ??? ?? ?????.
