CSS固定定位[相对浏览器] 相对定位[相对自己] 绝对定位[有relative的元素]

本是古典何须时尚 2022-12-23 11:24 241阅读 0赞

# 1基础 #

Fixed：绝对定位，是相对于浏览器窗口来定位的，是固定的，不会跟屏幕一起滚动。
    Static：默认值，没有定位。
    Inherit：继承父元素的position值。
    Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设
    置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是
    空的，下面的的元素会来占据。
    Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该
    元素的大小会影响父元素的大小。

# 2例子 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70][]

# **3绝对定位 给第二个div设置absolute** #

.div2{
                    height:100px;
                    background-color: blueviolet;
                    position:absolute;
                    top:50px;
                    left:50px;
    }
    
    第二个div设置了absolute,则该div的宽度就由文本决定，且下面的div会上移占据之前第二个div的位置，top
    和left是相对于离它最近且不是static定位的父元素来定位的，在此div2因为没有父元素，所以第二个div相
    对于根元素即html元素来定位。

![20180430223753718][]

# 4相对定位 将第二个div设置为relative #

.div2{
                    height:100px;
                    background-color: blueviolet;         
                    position:relative;
                    left:50px;
                    top:50px;
    }
    
    设置relative的div不会影响其他div的位置，且top和left是相对于它原本自身的位置来定位。

![20180430224823651][]

# **5子绝父相 子绝兄弟相 给第二个div添加一个父div** #

<div class="div1">第一个div</div>         
      <div class="container1">
          第二个div的父div
          <div class="div2">第二个div</div>    
      </div>     
    </div>
    
    .container1
    {
       position:relative;
       height:200px;
       background-color: greenyellow;
    }           
    .div2
    {
      height:100px;
      background-color: blueviolet;
      position:absolute;
      top:50px;
      left:50px;
    }
    
    div2的父div设置为relative，下面的div3,div4会上移，div2也设置为absolute，
    div2就会相对于父div来定位。

![20180430225251589][]

# 6子相父相  **将div2即第二个div的absolute改为relative：相对自身进行定位的** #

.div2{
                    height:100px;
                    background-color: blueviolet;
                    position:relative;
                    top:50px;
                    left:50px;           
    }

![20180430225606143][]

注意，上面两个图的第二个div与父div的上边距是不同的，第一个是相对父div来定位，第二个是相对原来本身的位置来定位。
    可能此时你会注意到两个图的第二个div的宽度不同，在没有给div设置宽度的情况下，第一个是设为absolute，所以宽度为文本宽度，第二个是relative，所以宽度与父元素宽度相同。
    
    若保持上面的两种情况，都将第二个div的宽度设为500px，得到效果如下：
    由上图可以知道，absolute定位的子元素宽度不会影响父元素的宽，而relative定位的子元素会撑大父元素。

![20180430225947168][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70]: /images/20221120/598e54dc12134d0bb6d4fff2d9649b65.png
[20180430223753718]: /images/20221120/58e2c1f6fb7b45d3b71331d9a5a6afa7.png
[20180430224823651]: https://img-blog.csdn.net/20180430224823651
[20180430225251589]: https://img-blog.csdn.net/20180430225251589
[20180430225606143]: https://img-blog.csdn.net/20180430225606143
[20180430225947168]: https://img-blog.csdn.net/20180430225947168