网页中控制层绝对位置的CSS样式属性是什么

发布网友发布时间：2022-05-11 07:41

我来回答

共3个回答

热心网友时间：2022-04-19 23:14

CSS绝对定位属性：position （属性规定元素的定位类型）

绝对定位示例：

h2{position :fixed}

下面是position属性值

　　1、absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　2、fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

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

　　4、static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　5、inherit：规定应该从父元素继承 position 属性的值。

小案例：

<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2 class="pos_abs">这是带有绝对定位的标题（百度知道）</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

</html>

案例截图：

热心网友时间：2022-04-20 00:32

CSS 绝对定位 position: absolute;
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

如#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

CSS 相对定位 position: relative;
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

两个可以配合着使用

参考资料：http://www.w3school.com.cn/css/css_positioning_absolute.asp

热心网友时间：2022-04-20 02:06

POSITION:ABSOLUTE，是根据最接近的第一个用POSITION定位过的元素为准而定位的。

比如说
<body>
<div>
<div style="position:absolute;"></div>
</div>
</body>
这个里边的DIV就根据BODY定位。

但是
<body>
<div style="position:absolute;">
<div style="position:absolute;"></div>
</div>
</body>
里边的DIV就根据外边的DIV为最外围来定位。