CSS定位

最新推荐文章于 2023-03-03 09:51:47 发布

品克缤

最新推荐文章于 2023-03-03 09:51:47 发布

阅读量271

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/m0_46893049/article/details/123389144

版权

定位能够从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。

position: static;

position: relative;

top: value;
bottom: value;
left: value;
right: value;

相对定位工作的方式——你需要考虑一个看不见的力，推动定位的盒子的一侧，移动它的相反方向。所以例如，如果你指定 top: 30px; 一个力推动框的顶部，使它向下移动30px。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）

绝对定位的元素不再存在于正常文档布局流中（脱标）。它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的UI功能。例如，弹出信息框和控制菜单；翻转面板；可以在页面上的任何地方拖放的UI功能……

position: absolute;

绝对定位是元素在移动位置的时候，相对于它的 祖先元素来说的。如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。
注意元素的位置已经改变——这是因为top，bottom，left和right以不同的方式在绝对定位。 它们指定元素应距离每个包含元素的边的距离，而不是指定元素应该移入的方向。

例如：

selector {
	position: absolute;
	top: 30px;
    left: 30px;
}

在这种情况下，我们说的绝对定位元素应该位于距离“包含元素”的顶部30px，左边30px的位置。

若子级是绝对定位，则父级要用相对定位。

这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于<html>元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

使固定定位的元素固定在版心右侧的位置：

selector {
	position: fixed;
	left: 50%;							/*走浏览器宽度的一半*/
	margin-left: (版心width)*50% ;	  /*走版心的一半*/
}

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

selector {
	position: sticky;
}

“z - index”是对z轴的参考，影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有z-index为auto，实际上为0。

z - index只接受无单位索引值；你不能指定你想要一个元素是Z轴上23像素—— 它不这样工作。较高的值将高于较低的值，这取决于您使用的值。使用2和3将产生与300和40000相同的效果。
只有定位的盒子才有z - index 属性。

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

selector {
	position: absolute;
    /*走父级盒子的一半*/
    left: 50%;
    /*走自己的一半*/
    margin-left: -(盒子自己宽度的一半);
}

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度。

2.块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小。

3.浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题。

4.绝对定位、固定定位会完全压住盒子（包括文字），浮动会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字和图片（浮动产生的目的最初是为了做文字环绕效果）。

关注