CSS相对定位和绝对定位

xinhaip 发布于2019-08-30 15:54 / 1652人阅读

摘要：三绝对定位拼爹型绝对定位不占有位置。父级有定位绝对定位是将元素依据最近的已经定位绝对固定或相对的父元素祖先进行定位。绝对定位的盒子水平垂直居中普通盒子左右居中用即可，但对于绝对定位的就无效了。

为什么要学定位

定位是CSS中的难点和重点，特别是后面学javascript特效时候，比如实现下拉菜单、弹框等，要盖住下面内容又不会影响下面内容，比如要超出盒子一部分，比如屏幕中有一个小弹窗飘来飘去的，再比如要放在盒子中任意位置，都必须用定位来做，一定要搞清楚。
定位类似于浮动，脱离标准流，但又不同于浮动，它可以放在任何地方。

元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。
1.边偏移：告诉盒子往哪儿走
2.定位模式（定位的分类）

一、静态定位(static)

所有元素的默认定位方式，网页中所有元素都默认的是静态定位，其实就是标准流的特性。

静态定位唯一的用处，就是取消定位。

例如有些网站的栏目，往下划的时候会出现，往上划到顶部的时候又消失了，栏目一会儿有定位一会儿没有定位，实现方式就是一会儿加个固定定位，一会儿用static取消固定定位。

二、相对定位(relative)--自恋型

相对定位是将元素相对于它在标准流中的位置进行定位，即每次移动的位置，是以自己的左上角为基点移动的。例如设置了margin，则以margin后的左上角位置来移动。

对元素设置相对定位后，可以通过边偏移属性来改变元素位置，但它在文档流中的位置继续占有。

注意：
1.相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来所占的位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基点移动。
如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值是移动位置，让盒子到我们想要的位置上去。

三、绝对定位(absolute)--拼爹型

绝对定位不占有位置。
1.父级没有定位
若所有父元素都没有定位，或没有父亲，则以浏览器左上角为准对齐。

2.父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对）的父元素（祖先）进行定位。例如父亲没有定位，爷爷有定位，则根据爷爷进行定位。

子绝父相

一般来说，子级是绝对定位的话，父亲要用相对定位。

因为如果父亲用绝对定位，它不占文档位置，后面的紫色盒子就会盖住蓝色的盒子，并不是我们想要的效果。

网站上经常用到的类似的小箭头，都是用绝对定位做的，因为绝对定位不占文档位置。

绝对定位的盒子水平/垂直居中

普通盒子左右居中用margin:aotu即可，但对于绝对定位的就无效了。

加了定位的或浮动的盒子，margin:auto就会失效。

可以用一下方法：
1.首先left:50%，此时盒子左边对齐浏览器中线；
2.然后margin-left:-a(a为盒子宽度的一半），让盒子往右走自己宽度的一半。

四、固定定位（fixed）--认死理型

1.固定定位元素跟父亲没有任何关系，只认浏览器；
2.固定定位完全脱标，不占位置，不随着滚动条滚动。

定位模式转换

跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块元素，因此行内元素若添加了绝对定位、固定定位、浮动后，可以不用转换模式，直接给高度和宽度即可。
注意：行内块元素的高宽和内容有关系。

云服务器 GPU云服务器相对定位-绝对定位相对定位绝对定位相对定位自适应

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

转载请注明本文地址：https://www.ucloud.cn/yun/117073.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详细解读定位

摘要：有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。我的回答是相对自己文档流中的原始位置定位。这里就不解释脱离文档流的问题，主要研究它的定位问题。一前言 CSS定位是CSS布局只能够重要的一环。本篇文章带你解读定位属性，可以让你更加深入的理解定位带来的一些特性，熟练使用CSS布局。二正文 1.文档流布局的概念将窗体自上而下分成一行行，并在每行中按从左至右的...

1treeS 2019-08-30 14:01 评论0 收藏0
详解css相对定位和绝对定位

摘要：以上两点点可以总结出，相对定位总是以父级左上角为原点进行定位的，如果父级不存在，则以浏览器左上角进行定位。赞助我以写出更好的文章，give me a cup of coffee? 2017最新最全前端面试题案例代码1 .rel{ border: 1px solid #ccc; height: 200px; ...

Jaden 2019-08-28 17:57 评论0 收藏0