CSS学习笔记-css定位

3.CSS定位

绝对定位(absolute)

特性

脱离文档流

默认参照物为浏览器视窗的左上角

   <div class="containner">
        <div class="box">
        1
        </div>
        <div class="box position">
        2
        </div>
        <div class="box fixed">
        3  
        </div>
    </div>

.position{
    position: absolute;
    left: 20%;
    top: 20%;
}

以浏览器左上角为参照物

相对定位(relative)

特性

不脱离文档流

默认参照物为此元素原位置

固定定位(fixed)

脱离文档流

默认参照物为浏览器视窗位置

 <div class="containner">
        <div class="box">
        1
        </div>
        <div class="box position">
        2
        </div>
        <div class="box fixed">
        3  
        </div>
    </div>

.fixed{
    position: fixed;
    left: 40%;
    top: 0%;
}

默认参照物为浏览器视窗位置,不会随着滚动条的移动而移动

标签：浏览器,视窗,参照物,笔记,默认,CSS,position,fixed,css
来源： https://blog.csdn.net/Laollaoaolao/article/details/119487645