position绝对定位

最新推荐文章于 2024-06-28 22:16:43 发布

Linear56

最新推荐文章于 2024-06-28 22:16:43 发布

阅读量602

点赞数

分类专栏： HTML/CSS 文章标签： div 浏览器 html

本文链接：https://blog.csdn.net/Linear56/article/details/6023570

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关于绝对定位：position

一般的图层实际上是遵循了html定位规则，position默认为static.这样所有在这个规范下的层在显示的时候都会在在同一个页面中排列。
然而，程序员可以设置这个属性的值：position:absolute.设置了这样的属性值之后层的显示方式就会发生定位方式的变化：由普通定位改为绝对定位。
在绝对定位中除了必须设置的position:absolute之外还可以设置这样几个边界属性：top/left/right/bottom.他们的取值是相对于其直接父绝对定位层————
————这里有必要对这个直接父绝对定位层做一下说明：对于普通的层，如果A层嵌套在B中，那么B就是A的直接父层。然而对于绝对定位层来说却不是这样，
一个绝对定位层的父层必须是一个绝对定位层或者是整个的浏览器对象(body)。也就是说，假如一个绝对定位层A嵌套在另外一个绝对定位层B中，那么A的
top/left边界值就是相对于B的边界的，如果A的父层没有任何绝对定位层，那么A的top/left边界值就是相对于body的。

需要说明两点：
    第一：绝对定位层不会影响其他层的显示位置。因为严格来说，绝对定位层和一般普通层并不处在同一块画布之上(这些画布有上有下).如果给
            这些画布的上下顺序编号的话普通层所在的层号是0,绝对定位层层号可由程序员指定(>0表示在上层，0>表示在下层)，由此引出下面需要说明的一点
    第二：绝对定位层所在的层号可以自己指定:z-index:-1，数值为整数，并且数值越小，所在层越靠下。

下面是关于绝对定位的一个示例：

-------css file------------------------

#absbox1{
    position:absolute;
    top:20px;
    left:100px;
    width:300px;
    height:300px;
    background-color:yellow;
    z-index:1

}

.absbox2{
    position:absolute;
    top:10px;
    left:350px;
    width:100px;
    height:100px;
    background-color:red;
    z-index:-1;

}

--------html file----------------------
<body>

    <div id="absbox1">
        <div id="absbox2">
        </div>
    </div>

</body>