css定位 position

css定位 position

css定位

场景

当我们需要一个元素在某个盒子内移动位置，并且压住其他盒子
当滚动条滚动时，某个元素保持不动

定位组成

将盒子定在某个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子
定位= 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置

定位模式（position）

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

left right top bottom

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

在使用定位的时候需要和边偏移一起使用，否则就跟没有使用定位一个效果，一动不动

静态定位static（了解）

静态定位是元素的默认定位方式，无定位的意思

{position:static;}

• 静态定位按照标准流特性摆放位置，没有边偏移
• 静态定位在布局时很少用到

相对定位relative（重要）

相对定位是元素在移动位置的时候，是相对于他原来的位置来说的（自恋型）

{position:relative}

特点（重要）：

• 他是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
• 原来在标准流的位置继续占有 ，后面的盒子仍然以标准流的方式对待他（不脱标，继续保留原来位置）因此，相对定位并没有脱标，他最典型的应用是给绝对定位当爹的
  例如下面的例子，在一个父容器中有三个子容器，我们让第一个元素相对于他原来的位置向左向下移动20px。这就是相对定位

<style>div{border: 1px solid ;margin: 2px;}.container{height: 200px;width: 200px;}.container div{height: 50px;width: 50px;}
</style>
<div class="container"><div>1</div><div>2</div><div>3</div>
</div>

绝对定位absolute（重要）

绝对定位是元素在移动位置的时候，是相对于他的祖先（父）元素来说的 （拼爹型）
特点（重要）：

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（document文档）
  • 例如 top100px就是相对浏览器顶部距离100像素，right 100px 就是相对浏览器右边100像素
  • 如果有父元素，但是父元素没有定位，则效果也一样，相对浏览器来定位
• 如果祖先元素有定位（相对、绝对、固定定位） ， 则以最近的一级的有定位的祖先元素为参考点进行移动（一般给父元素添加{position:relative}）（父相子绝）
• 绝对定位不再占有原来的位置，将脱离文档流，,如下图中的左右切换按钮和轮播，都是可以使用这种方式，来定位并且脱离文档流，不占用背景轮播图的位置

子绝父相

意思就是子元素设置绝对定位，父元素设置相对定位
实现上面好声音的布局，可以说是非常的方便了，设置父元素相对定位，设置左边绝对定位，往下百分之50，设置右边绝对定位，向下百分之50，靠右边，设置轮播绝对定位，向下百分之80，距离左边百分之5

<style>div{border: 1px solid ;margin: 2px;}.container{position: relative;}.left{position: absolute;top: 50%;}.right{position: absolute;right: 0;top: 50%;}.lb{position: absolute;top: 80%;left: 5%;}.background{height: 200px;background-color: #bfa;}
</style><div class="container"><div class="left">左</div><div class="right">右</div><div class="background">背景</div><div class="lb">轮播</div></div>

固定定位fixed（ 重要）

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素位置不会改变

{position:fixed}

特点（重要）：

• 以浏览器的可视窗口为参照点移动元素（可视窗口就是不包括URL栏，标签栏等等），如下图，我们给这个图片设置固定定位，top ：0 ，right：0，即可显示到浏览器的右上角
  • 跟父元素没有任何关系，由于是以浏览器可视窗口为参照，因此无论有没有父元素，都一样
  • 不随滚动条滚动
• 固定定位不占有原先的位置，也是脱离文档流的，可以看做是一种特殊的绝对定位

固定定位-定位到版心右侧

例如下图的右下角的返回顶部按钮，这个盒子不是固定到浏览器的固定位置，而是固定到版心也就是内容区的右下角，这个如何实现呢？
一个小技巧：

• 让固定定位的盒子left:50%，走到浏览器可视区的一半位置
• 让固定定位的盒子margin-left 版心宽度的一半距离，多走版心宽度的一半位置
  

总结：也就是先走浏览器的一半，再加版心（内容区）的一半，就是固定到版心的右侧

粘性定位sticky（了解）

粘性定位可以认为是相对定位和固定定位的混合。

{position:sticky}

特点：

• 以浏览器的可是窗口为参照点移动元素（固定定位的特点）
• 粘性定位占有原先的位置（相对定位特点）
• 必须添加top left right bottom 其中一个才有效
  与页面滚动搭配使用，兼容性较差，IE不支持

总结

定位叠放次序z-index

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序

• 数值可以是正整数，负数或者0，默认auto，数值越大 ，盒子越靠上
• 如果属性值相同，则按照书写顺序，后来居上（写在后面的元素在上面）
• 数字后面不能加单位
• 只有定位的盒子才有z-index属性（标准流和浮动是没有这个属性的）

定位拓展

绝对定位的盒子居中

加了绝对定位的盒子（position:absolute）不能通过margin:auto实现水平居中，但是可以通过以下计算方法实现水平和垂直居中

• 先left 50%
• 再往回走自己盒子宽度的一半 margin:-100px这样

垂直居中也类似，先走top50% 在走自己的高度的一半

定位的特殊性

绝对定位和固定定位也和浮动类似

• 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
• 块级元素添加绝对或固定定位，入股哦不给宽度或者高度，默认大小是内容大小
• 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题（高度塌陷）

绝对定位（固定定位）会完全压住盒子

例如下面这个案例，当div设置了浮动之后，脱离文档流，下面的p元素就会上移到原来div的位置，并且div会压住p元素，但是不会压住p标签的内容和图片，这是与绝对定位（固定定位）不同的，如果给div设置了绝对定位或固定定位，则会将p标签的内容也遮住。

<style>.box{float:left;width:150px;height:150px;background-color:pink;}
</style>
<div class="box"></div>
<p>阁下何不同风起，扶摇直上九万里</p>

浮动

绝对定位

那么为什么浮动不会压住文字呢？因为浮动最初发明出来的时候就是为了做文字环绕效果。
当我们在一段文字中插入一张图片，则图片会将文字撑开

如果我们给图片增加个浮动，则会出现环绕效果