css position相对定位与绝对定位之彻底搞懂
2019-01-19 10:04
1301 查看
定位position
position本身就有给...定位的意思
position属性的值:
static---默认值 relative---相对定位 absolute---绝对定位 fixed---固定定位 sticky---粘性定位(本文不讲这个)
position:static
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时
top,right,bottom,left和z-index属性无效。
position:relative
- 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。
- 注意:元素并未脱离文档流
示例
css .box { width: 100px; height: 100px; background: lightgreen; color: #000; border: 1px solid #ccc; } #two { position: relative; top: 20px; left: 20px; background: lightcoral; } #outer { margin: 0 auto; width: 500px; height: 500px; border: 1px solid #000; }
html <div id="outer"> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </div>
效果:
解释:
我们在效果图中可以看到,two元素相对于自身原来的位置进行了调整,但并没有影响到其他元素。
在这里我发现了一个问题:看下图
一开始的css中我们使用了
top:20px和left:20px将two元素进行了调整,通过上图就会发现这两个20px并不属于盒子模型,他只是用定位将two元素进行了位置调整。
接下来我们在其他不改变的情况下将
top:20px和
left:20px换为
margin-top: 20px和
margin-left: 20px
css #two { position: relative; /* top: 20px; left: 20px; */ margin-top: 20px; margin-left: 20px; background: lightcoral; }
效果:
与上面的使用
top和
left时我们发现有两点不同:
margin-top和margin-left的两个20px属于盒子模型了- 注意看蓝色框框标示的地方,
two元素强制将three元素向下撑了
总结
我们使用
position:relative时为了不影响其他元素使用top和left更好,而不使用margin-top和margin-left。
position:absolute
- 绝对定位元素相对于最近的非
static祖先元素定位。当这样的祖先元素不存在时,则相对于ICB(inital container block, 初始包含块(根元素所在的包含块))。- 因为默认是
static所以一般我们使用绝对定位时给祖先元素(经常是父级元素)加上position:relative。- 在布置文档流中其它元素时,绝对定位元素不占据空间。
- 绝对定位的元素则脱离了文档流。
包含块:包含块简单说就是定位参考框,或者定位坐标参考系,元素一旦定义了定位显示(相对、绝对、固定)都具有包含块性质,它所包含的定位元素都将以该包含块为坐标系进行定位和调整。
示例:
css .box { background: lightgreen; width: 100px; height: 100px; float: left; color: white; border: 1px solid #ccc; } #three { position: absolute; top: 20px; left: 20px; } #outer { position: relative; margin: 0 auto; width: 500px; height: 500px; border: 1px solid #000; }
html <div id="outer"> <div class="box" id="one">One</div> <div class="box" id="two">Two</div> <div class="box" id="three">Three</div> <div class="box" id="four">Four</div> </div>
效果:
解释
我们给
outer即onetwothreefour四个元素的父级元素加上了position:relative给three加了position: absolute并通过top: 20pxleft: 20px改变了它的位置,由效果图我们可以看到,three元素脱离了文档流(不占空间,不会影响其他元素),并相对于outer元素进行了位置调整。
position:fixed
- 固定定位与绝对定位相似,但元素的包含块为 viewport 视口。
- 常用于创建在滚动屏幕时仍固定在相同位置的元素。
示例:
css #outer { width: 200px; height: auto; margin: 0 auto; } #fix { position: fixed; top: 100px; right: 0px; width: 50px; height: 100px; background-color: aqua; }
html <div id="outer"> <p>《再别康桥》</p> <p>作者: 徐志摩</p> <p>轻轻的我走了, </p> <p>正如我轻轻的来; </p> <p>我轻轻的招手, </p> <p>作别西天的云彩 </p> <p>---</p> <p>那河畔的金柳, </p> <p>是夕阳中的新娘; </p> <p>波光里的艳影, </p> <p>在我的心头荡漾 </p> <p>---</p> <p>软泥上的青荇, </p> <p>油油的在水底招摇;</p> <p>在康河的柔波里, </p> <p>我甘心做一条水草 </p> <p>---</p> <p>那榆荫下的一潭, </p> <p>不是清泉,是天上虹; </p> <p>揉碎在浮藻间, </p> <p>沉淀着彩虹似的梦。 </p> <p>---</p> <p>寻梦?撑一支长篙,</p> <p>向青草更青处漫溯;</p> <p>满载一船星辉,</p> <p>在星辉斑斓里放歌。</p> <p>---</p> <p>但我不能放歌, </p> <p>悄悄是别离的笙箫; </p> <p>夏虫也为我沉默, </p> <p>沉默是今晚的康桥! </p> <p>---</p> <p>悄悄的我走了, </p> <p>正如我悄悄的来; </p> <p>我挥一挥衣袖, </p> <p>不带走一片云彩。 </p> </div> <div id="fix"></div>
效果:
解释:
- 定位元素处于右上角,当浏览页面底部时,它相对于 viewport 视口仍处于同一位置。
- 我们只需要给要固定的元素加上
position: fixed在通过top或bottom和left或right调整位置就能实现固定元素的效果。
完--------------
相关文章推荐
- css 相对绝对定位
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
- div相对定位与绝对定位
- 使用dinput鼠标的相对模式达到绝对定位
- 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)
- 相对定位和绝对定位
- 相对定位和绝对定位
- CSS 相对|绝对(relative/absolute)定位系列(一)
- CSS中关于定位的问题, 相对,绝对定位
- CSS 相对/绝对(relative/absolute)定位系列(三)
- css基础 绝对定位 position:absolute 相对于定位的祖先元素进行定位
- CSS的相对定位和绝对定位
- 相对定位和绝对定位
- position的值, relative和absolute分别是相对于谁进行定位的? absolute :生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。 fi
- 操作系统_第四章_存储管理之重定位:绝对地址和相对地址
- 从一个居中方法说起 —— 谈 translate 与 相对、绝对定位
- javascriptBom中元素的绝对定位以及相对于body的x轴位置和y轴位置定位
- 相对定位与绝对定位
- absolute绝对定位(相对于整个html流)以及不为人知的(fixed)绝对定位(fixed相对于浏览器窗口=不动的div)
- CSS 相对/绝对(relative/absolute)定位系列(三)