CSS3——定位

介绍

　　相对定位

　　　　特点：元素移动时，占用原来的位置

　　　　position：relative

　　

　　再通过

　　　　top：元素上边偏移

　　　　left： 元素左边偏移

　　　　right：元素右边偏移

　　　　bottom：元素下边偏移

　　　

　　绝对定位

　　　　特点：以实现定位的父元素进行定位。元素移动时，不在占用原来位置

　　　　position : absolute

　　再通过

　　　　top :元素上边偏移

　　　　left：元素左边偏移

　　　　right：元素右边偏移

　　　　bottom：元素下边偏移

　　

　　粘性定位

　　　　特点：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

　　　　　　　position：sticky

　　　　　　　relative （偏移量）>  fixed（偏移量）。偏移量 > fixed ，元素表现相对定位。偏移量 <= fixed 元素表现固定定位

　　　　　　　relative（偏移量） < fixed（偏移量）。 元素表现fixed偏移量

　　　　注意：最好加上z-index: 98

　　　　使用

<div class="mydiv">粘性定位</div>

.mydiv {
    width: 300px;
    height: 200px;
    background-color: #00BFFF;
    margin: 0px auto;
    margin-top: 100px;
    position: sticky;
    top: 300px;
}

 

 

　　固定定位

　　　　特点：元素的位置相对于浏览器窗口是固定位置。

　　　　　　　position:fixed

　　　　注意：固定定位加上偏移属性才生效，或者以文档流形式加载

　　　　值：

　　　　　   top :元素上边偏移

　　　　　　left：元素左边偏移

　　　　　　right：元素右边偏移

　　　　　　bottom：元素下边偏移

　　　　使用

<div class="mydiv">固定定位</div>

body {
    height: 3000px;
}

.mydiv {
    position: fixed;
    width: 300px;
    height: 300px;
    background-color: #00BFFF;
    bottom: 10px;
}