css中定位是什么-创新互联

css中定位是什么？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

一、相对定位

position: relative
相对默认的布局位置进行定位，也就是相对自己应该在的位置来定位。

.avatar {
  top: 3px; //从上到下偏移3px
  left: 7px; //从左到右偏移7px
  position: relative;
}

相对定位是没有脱离普通文档流的，对于页面其他元素，box2还是待在原位的。

二、绝对定位

position: absolute

.box {
position:absolute;
top:10px;//相对定位点，从上到下偏移10px
left:10px; //相对定位点，从左到右偏移10px
}

• 绝对定位元素脱离正常文档流，其他元素就看不见它。绝对定位元素也看不见绝对定位元素。所以下图2个box2发生了重叠

• 绝对定位的定位对象是从它的父元素找是否有relative/fix/absolute。如果父元素设置了relative/fix/absolute，那父元素就是绝对定位元素的定位点，如果父元素没有设置relative/fix/absolute，就继续往上找，直到body和html为止。如果都找不到就是以html根节点为定位点。

所以使用absolute绝对定位的时候，最好在父元素上设置相对定位relative。

• 设置绝对定位之后，块级元素宽度会收缩，宽度由内容决定。行内元素可以设置宽高，内外边距。

三、z-index

z-index详细介绍

1、z-index 定义：

属性设置元素的堆叠顺序，该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。也就是说拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

2、遇到的坑：

（1）、父元素z-index值更高，无论其子元素的z-index值大小，都可以覆盖z-index值比父元素小的元素。

（2）、如果z-index的值为auto，不会构成叠层上下文。

如下去掉div3的z-index，div3的子元素div4和div6都直接和div3同级的div1/div2相互叠层。demo

（3）、父子关系的z-index 如何设置，不影响它和 box 的堆叠顺序。但我发现如果不设置父元素的z-index，然后再把子元素的z-index值设置为负数。父元素就会直接覆盖子元素。
如下图，box1没有设置z-index，设置tooltip的z-index为负，box1就覆盖了tooltip
demo链接链接描述，目前不得其意，之后补坑

四、固定定位

position: fixed
相对浏览器窗口进行定位。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。
比如说浏览器右边 回到顶部的按钮就是采用的固定定位。

.feedback {
  right: 30px;
  bottom: 30px;
  position: fixed;
}

关于css中定位是什么问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。