定位之层模型

2018-05-07 本文已影响0人 Papio_y

css当中除了盒模型之外还有层模型，而出发层模型的主要属性就是position属性，该属性有四个属性值，没有static、relative、absolute、fixed

static

static属性是position，默认的属性值，当position没有设置属性的时候，该属性值就是static

relative

position: relative; 相对定位,保留原来的位置进行定位

它同样能跳出当前层面，但是保留了原来的位置，也就是他的依然脱离的当前的层面，他原来的位置保留的意思就是别的元素会看到它的，假如设置了left、top移动了它之后，他原来的位置就像他的肉体，而移动之后的东西，相当于它的灵魂，和其他的元素不在同一个层面。
因为它保留了原本位置的特性，所以在页面布局的时候作用其实很小，应用场景很小，所以它一般用来给absolute当做陪衬的，给一个父级元素设置定位之后，就能让子元素设置absolute之后完美定位了。
不能触发bfc

<div class = "demo1"></div>
<div class = "demo2"></div>

div{
    width: 100px;
    height: 100px;
}
.demo1 {
    background-color: green;
    position: relative;
    left: 50px;
    top: 50px;
}
.demo2 {
    background-color: red;
}

relative.png灵魂出窍

可以看到这里绿色元素脱离原来的位置了，但是没有让出原来的位置

absolute

position: absolute;用来设置绝对定位，而这个元素就是层模型很关键的属性

判断一个absolute元素根据啥定位的：==①有定位的父级，②body== 所以一般我们将父级元素设置为relative作为坐标，要定位的元素设为absolute来根据父级定位
当一个元素设置了position: absolute;的时候，它就脱离了它原本的位置，到达了另外一个层面，这样也就把原来的位置给让出来了。
该属性有对应的四个配合定位的属性，元素脱离了原来的层面是为了定位的，并且它的定位也不会影响其他的元素的位置，这样就很方便的随行所欲的控制元素了。而这四个配合的属性就是left top right bottom 显而易见，他们就是控制位置的元素。这四个值==合理搭配==能将我们的元素处理到正确的位置
absolute 属性会触发元素的bfc
在浏览器中，我们通过元素的左上角来设置left top ,通过右下角来设置right bottoms

absolute和relative的区别

<div class="wrapper">
    <div class="box">
        <div class="content"></div>
    </div>
</div>

.wrapper {
    width: 200px;
    height: 200px;
    background-color: orange;
    margin-top: 100px;
    margin-left: 100px;
}
.box{
    width: 100px;
    height: 100px;
    background-color: black;
    margin-left: 100px;
}
.content {
    width: 50px;
    height: 50px;
    background-color: yellow;
}

absoluterelative.png
我们通过控制margin让元素处于这种状态
给黄色的加上pasition: absolutle;left:50px;top:50px;之后

position.png
我们发现这里的黄色方块跑出去了
当我们给黑色的加上position:relative 的时候

relative.png
可看到这里黄色方块又根据黑色元素定位了

总结

absolute属性根据最近的有定位的父级进行定位，如果没有就根据文档进行定位
relative属性相对自己原来的位置进行定位
将relative当基地当做参照，用absolute元素进行定位。

fixed

人称广告定位，很多时候你会看到网页上面有很多的小广告，它就在那个位置，不过你怎么滑动页面，它都会在那里，一动不动，没错，它可能就是fixed定位实现的。
position: fixed; 脱离文档流，相对于浏览器窗口进行定位，浏览器窗口，也可以说是可视区

应用

让元素居中定位

<div class="wrapper">
    <div class="content"></div>
</div>

/*让content在wrapper当中垂直居中*/
.wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
}
.content {
    width: 40px;
    height: 40px;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -20px;
    margin-top: -20px;
}

垂直水平居中.png

就是相对于文档进行居中了，同样fixed定位也可以使用这种居中方式，实现在屏幕中间的广告！
关键点：使用margin来平衡那段因为定位移出去的距离！

使用层级定位实现三栏布局

<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
<!-- 这里mid必须写在结构的最下面，如果在前面的话，我们没有设置top，因为div独立成行的特性，他会占据一行，让left和right换行展示。但是如果对right和left设置了top:0;的话就可以很随意了 -->

*{
    margin:0;
    padding:0;
}
.left {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: red;
 }
.right{
    position: absolute;
    background-color: black;
    right: 0;
    width: 100px;
    height: 100px;
}
.mid {
    height: 100px;
    margin-right: 100px;
    margin-left: 100px;
    background-color: orange;
}

能够在三栏布局.png

关于浏览器的一个常见的问题

我们在编写代码之后都有一个初始化的过程*{margin:0;padding:0;}，为了去除页面上元素的一些默认的内边距和外边距，避免一些外界的因素导致的bug。
其实，在页面当中body元素本身就包含了8px的margin；

body.png