position布局详解

最新推荐文章于 2022-11-29 21:23:23 发布

Marvel__Dead

最新推荐文章于 2022-11-29 21:23:23 发布

阅读量2.1k

点赞数 1

分类专栏： CSS3 文章标签： html 布局 css3

本文链接：https://blog.csdn.net/Marvel__Dead/article/details/53055561

版权

CSS3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

简介：当你已经学会了怎么用选择器去选择html标签，那么就得给html标签一些适当的布局让html页面变得美观了。
CSS3选择器详解

position布局

position布局有以下几个属性值:realtive、absolute、fixed、static。

static：无特殊定位，对象遵循正常文档流，默认取该值。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，某元素将定位在框架或浏览器窗口本身或其包含块的左上角的绝对位置，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以浏览器窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

以上几个一般默认的布局就是static 并没有什么作用.

常用的几个就只有absolute,relative,fixed。

现在先来构建一个默认的结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position布局</title>
    <style>
        .div1{
            height: 200px;
            background: #7CF45C;
        }
        .div2{
            height: 300px;width: 600px;
            background: #aaaaaa;
        }
        .div3{
            height: 120px;
            background: #88bb77;
        }
    </style>


</head>
<body>
    <!--一般现在布局都用  relative absolute fixed布局-->
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>


</body>
</html>

效果图:
这里写图片描述

当设置div2的布局为 position:relative;

.div2{
            height: 300px;width: 600px;
            background: #aaaaaa;
            position: relative;
            top: 30px;
        }

效果图：

这里写图片描述

很明显就能知道relative的作用就是占用了以前文档流布局的位置，并且参照了以前文档流的位置进行了 top 30px 的偏移。而不设置top偏移就默认不进行偏移。

那么当我们设置 position:absolute;

.div2{
            height: 300px;width: 600px;
            background: #aaaaaa;
            position: absolute;
            top: 30px;
        }

效果图：

这里写图片描述

div2就被从文档流中抽离了出来参照body进行了 top 30px的偏移。
而不设置top偏移就会是这样：

.div2{
            height: 300px;width: 600px;
            background: #aaaaaa;
            position: absolute;
        }

效果图：
这里写图片描述

总结：

当设置了relative布局时，当前标签会占用当前文档流。不进行偏移就在当前位置如果要进行偏移就会参照当前位置进行偏移。
当设置了absolute进行布局时。当前标签会被拉出文档流进行独立布局。不进行偏移就会在当前文档流位置。但是后面的标签就会上前。只是设置了absolute的标签显示就会在上面而已，但是可以通过z-index 设置叠层优先级。在这里，偏移就会参照body进行偏移。
偏移是指通过设置 top bottom left right等进行上下左右进行偏移。

在实际的过程中我们往往是要进行div嵌套的。那么这些布局又会怎么样呢？？

当所有标签都没有设置position的效果时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position布局</title>
    <style>
        .div1{
            height: 200px;
            background: #7CF45C;
        }
        .div2{
            height: 300px;width: 600px;
            background: #aaaaaa;
        }
        .div3{
            height: 120px;
            background: #88bb77;
        }
        .div2-one{
            width: 150px;
            height: 80px;
            background: #e13157;
        }
        .div2-two{
            width: 200px;
            height: 80px;
            background: #b3d4fc;
        }
    </style>


</head>
<body>
    <!--一般现在布局都用  relative absolute fixed布局-->
<div class="div1"></div>
<div class="div2">
    <div class="div2-one"></div>
    <div class="div2-two"></div>
</div>
<div class="div3"></div>


</body>
</html>

效果图:
这里写图片描述

当我们吧div2-one设置了下面这个样式后：


.div2-one{
            width: 150px;
            height: 80px;
            background: #e13157;
            position: absolute;
            top: 30px;
        }

效果图：
这里写图片描述

因为div2-one是 absolute布局所以后面的div2-two就会上前填补空位，如果是relative的话就不会进行填补。

很明显这不是我们要的效果，我们是想要div2-one在div2中进行布局。
所以这里就会有一个布局的规则：所有元素布局都会需要一个参照。当子元素进行了布局操作后，它就会自动到自己的上级元素查找是否上级元素有position布局等操作，如果父级没有position布局等操作就会到上级的上级去查找，直到找到参照点为止。所以在这里，因为div2没有进行positon等布局操作，子元素div2-one就会向上查找，最后就会找到body。body就已经是顶级元素了。所以就参照了body进行了偏移布局。

所以如果我们想要让div2-one在div2中，我们就需要给div2设置布局。可以是absolute、relative、fixed。fixed就需要读者自己亲自试验了。

.div1{
            height: 200px;
            background: #7CF45C;
        }
        .div2{
            height: 300px;width: 600px;
            background: #aaaaaa;
            position: absolute;
        }
        .div3{
            height: 120px;
            background: #88bb77;
        }
        .div2-one{
            width: 150px;
            height: 80px;
            background: #e13157;
            position: absolute;
            top: 30px;
        }
        .div2-two{
            width: 200px;
            height: 80px;
            background: #b3d4fc;
        }

效果图:

这里写图片描述

然后这样就能够实现我们想要的布局了。

注意：position布局非常重要，这是学习前端最重要的东西。只有当学习了选择器后再把position和float布局学了才算入门。这是个人的观点。

Marvel__Dead

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
position布局详解

简介：当你已经学会了怎么用选择器去选择html标签，那么就得给html标签一些适当的布局让html页面变得美观了。 CSS3选择器详解position布局position布局有以下几个属性值:realtive、absolute、fixed、static。static：无特殊定位，对象遵循正常文档流，默认取该值。top，right，bottom，left等属性不会被应用。relative：对象遵
复制链接

扫一扫