5,006
社区成员
发帖
与我相关
我的任务
分享
<div style="position:absolute; width:100px; height:100px; background-color:red;">
absolute
</div>
<div style="height:50px; border:1px solid blue; width:200px;">DIV 中的普通文本元素</div>
<div style="position:absolute; left:60px; width:100px; height:100px; background-color:green;">
absolute
</div>
以上例子中,两个绝对定位元素都未声明其 top 特性,那么top就会取它在常规流中的位置(后面会讲到)。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>A frame document with CSS2</TITLE>
<STYLE type="text/css">
BODY {
height: 8.5in
}
div {
border: 1px solid red;
}
/* Required for percentage heights below */
#header {
position: fixed;
width: 100%;
height: 15%;
top: 0;
right: 0;
bottom: auto;
left: 0;
}
#sidebar {
position: fixed;
width: 10em;
height: auto;
top: 15%;
right: auto;
bottom: 100px;
left: 0;
}
#main {
position: fixed;
width: auto;
height: auto;
top: 15%;
right: 0;
bottom: 100px;
left: 10em;
}
#footer {
position: fixed;
width: 100%;
height: 100px;
top: auto;
right: 0;
bottom: 0;
left: 0;
}
</STYLE>
</HEAD>
<BODY>
<DIV id="header"> ...</DIV>
<DIV id="sidebar"> ...</DIV>
<DIV id="main"> ...</DIV>
<DIV id="footer"> ...</DIV>
</BODY>
</HTML>