position 的定位

ywzqzhangjiawei

于 2010-09-09 14:20:49 发布

阅读量336

点赞数

分类专栏： web应用文章标签： HTML

本文链接：https://blog.csdn.net/ywzqzhangjiawei/article/details/83706889

版权

web应用专栏收录该内容

10 篇文章 0 订阅

订阅专栏

absolute：
参照外面的包含块的位置设定，但外面的包含块必须是设定 position的（static除外）。
fixed：
悬浮，使元素固定在屏幕的某个位置，其包含块是可视区域本身，因此它不随滚动条的滚动而滚动

relative：
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

例子：

fixed.html

<html>

<style>
#d1{
width:100px;
height:100px;
border:1px solid #000000;
position:fixed;
left:200px;
top:200px;
}
</style>

<body>
<div id="d1">

</div>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>

</html>

relative.html

<html>

<style>
#d1{
width:100px;
height:100px;
border:1px solid #000000;
position:relative;
left:200px;
top:200px;
}
</style>

<body>
<div id="d1">

</div>

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</body>

</html>

absolute.html

<style>
body {
margin:0;
padding:0;
text-align:center;
}
#box{
background:#ff0;
position:relative; /* 使box层成为其子孙元素的包含块 */
width:500px;
height:200px;
margin:0 auto;
}
#nav {
background:#ccc;
position:absolute; /* nav层将在box层的边框范围内绝对定位 */
top:20px;
left:40px;
width:200px;
}
</style>
<body>

<div id="box">
<div id="nav">
每个显示元素都可以用定位的方法来描述，而其位置由此元素的包含块来决定的。
</div>
</div>
</body>