css 定位

warmcheng 发布于2019-08-29 17:14 / 3582人阅读

摘要：一相对定位相对默认的布局位置进行定位，也就是相对自己应该在的位置来定位。如果都找不到就是以根节点为定位点。设置绝对定位之后，块级元素宽度会收缩，宽度由内容决定。因此当滚动产生时，固定定位元素依然处于窗口的某个固定位置。

一、相对定位

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;
}

GPU云服务器云服务器相对定位-绝对定位人脸定位图片定位相对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114191.html

CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

paulquei 2019-08-29 13:01 评论0 收藏0
CSS入门指南-3：定位元素

摘要：静态定位下，每个元素在处在常规文档流中，它们都是块级元素，所以会在页面中自上而下地堆叠。这说明绝对定位的元素脱离了常规文档流，它现在是相对于顶级元素在定位。事实上，一个相对定位元素同时设置了和位移属性值，实际上优先级高于。这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。 ...

DesGemini 2019-08-01 17:15 评论0 收藏0
position 的属性值

摘要：注意当该固定元素的祖先元素的属性非时，容器由浏览器窗口改为该祖先元素粘性定位，相当于相对定位和固定定位的混合。粘性定位根据一个阈值决定，在大于等于阈值时采用相对定位，小于阈值后则为固定定位。理论上来说，全部 position 的取值有8个包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西红柿 2019-04-23 13:30 评论0 收藏0
CSS 中的定位

摘要：块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素框从文档流完全删除，并相对于其包含块定位。中的文档流标准文档流文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。 1 CSS 中的定位 1.1 了解定位（positioning）定位的基本思想：它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元...

beanlam 2019-08-23 18:23 评论0 收藏0
前端菜鸟笔记 Day-4 CSS布局

摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型宽度和高度内边距外边距 CSS定位浮动 CSS框模型内容引用：CSS 框模型概述 CSS 框模...

go4it 2019-08-30 15:55 评论0 收藏0
前端菜鸟笔记 Day-4 CSS布局

摘要：元素框从文档流完全删除，并相对于其包含块定位。简单来说就是，元素不再占用任何文档流的空间，只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短，使行框围绕浮动框，所以创建浮动框可以使文本围绕图像。文章大纲来源：【Day 3】HTML复习 + CSS基础 CSS框模型宽度和高度内边距外边距 CSS定位浮动 CSS框模型内容引用：CSS 框模型概述 CSS 框模...

Honwhy 2019-08-02 14:12 评论0 收藏0