how2j.cn

绝对定位
属性:position
值: absolute

通过指定left,top绝对定位一个元素

示例 1 : 绝对定位   
示例 2 : 绝对定位是基于最近的一个定位了的父容器   
示例 3 : 如果没有定位了的父容器   
示例 4 : z-index   

示例 1 :

绝对定位

属性:position
值: absolute
设置了绝对定位的元素,相当于该元素被从原文档中删除了
所以”正常文字4“会紧接着出现在 ”正常文字2“后面,而不会留下空档
运行效果
<style> p.abs{ position: absolute; left: 150px; top: 50px; } </style> <p >正常文字1</p> <p >正常文字2</p> <p class="abs" >绝对定位的文字3</p> <p >正常文字4</p> <p >正常文字5</p>
<style>
p.abs{
  position: absolute;
  left: 150px;
  top: 50px;
}

</style>

<p >正常文字1</p>
<p >正常文字2</p>
<p class="abs" >绝对定位的文字3</p>
<p >正常文字4</p>
<p >正常文字5</p>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

绝对定位是基于最近的一个定位了的父容器

对于 "绝对定位的文字" 这个p,其定位了的父容器即 class="absdiv" 的div
所以 "绝对定位的文字" 这个p 出现的位置是以这个div 为基础的
运行效果
<style> p.abs{ position: absolute; left: 100px; top: 50px; } .absdiv{ position: absolute; left: 150px; top: 50px; width:215px; border: 1px solid blue; } </style> <div> <p >正常文字a</p> <p >正常文字b</p> <p >正常文字c</p> <p >正常文字d</p> <p >正常文字e</p> <p >正常文字f</p> <p >正常文字g</p> </div> <div class="absdiv"> 这是一个定位了的div <p class="abs" >绝对定位的文字</p> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

如果没有定位了的父容器

"绝对定位的文字" 这个p 的父容器div,并没有定位。 所以它的”最近的一个定位了的父容器” 即body
运行效果
<style> p.abs{ position: absolute; left: 100px; top: 50px; } </style> <div> <p >正常文字a</p> <p >正常文字b</p> <p >正常文字c</p> <p >正常文字d</p> <p >正常文字e</p> <p >正常文字f</p> <p >正常文字g</p> </div> <div> 这个div没有定位 <p class="abs" >绝对定位的文字</p> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

z-index

通过绝对定位可以把一个元素放在另一个元素上,这样位置就重复了。

重复了,就存在一个谁掩盖谁的问题。 这个时候就可以使用

z-index属性, 当z-index的值越大,就表示放上面,z-index:越小就表示放下面。
运行效果
<style> img#i1{ position: absolute; left: 60px; top: 20px; z-index:1; } img#i2{ position: absolute; left: 60px; top: 120px; z-index:-1; } </style> <div> <p >正常文字a</p> <p >正常文字b</p> <p >正常文字c</p> <p >正常文字d</p> <p >正常文字e</p> <p >正常文字f</p> <p >正常文字g</p> </div> <img id="i1" src="http://how2j.cn/example.gif" /> <img id="i2" src="http://how2j.cn/example.gif" />


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-11-15 示例2中<p class="abs" >绝对定位的文字</p>这句话为什么不显示在div的框内?走过路过的朋友,请求支援
prayer1



从代码上看<p></p>被<div></div>包围了,可是结果显示<p>标签中的内容不在div中?这个我不太理解
<div class="absdiv">
这是一个定位了的div
<p class="abs" >绝对定位的文字</p>
</div>

							


2 个答案

asd无间 答案时间:2017-12-06
我感觉是子元素进行了绝对定位之后,这个子元素就会跟父元素划清界限,告诉他我要独立出来。至于为什么会这样,大概是css这个语言就是这么设计的呗

ToohoKing 答案时间:2017-11-19
那是因为div中的内容不足以把div撑大 你如果多输入一些字符或者加一些<br/>就能看到div把span包裹住啦




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-09-17 示例四,如果想把e单独放下面
说谎男孩
示例四,如果想把e单独放下面 <p z-index="-2" >正常文字e</p> 这样为什么不行?




1 个答案

how2j 答案时间:2017-09-18
样式能写在这里吗? CSS你白学了?




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-06-16 子元素相对于父容器定位的基准点是??
2017-06-16 子元素相对于父容器定位的基准点是??
2016-12-21 示例4的错别字~




提问之前请登陆
关于 前端基础-CSS-绝对定位 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图