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公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-03-11 这个z-index的图片很皮啊
喝可乐的鱼
<img id="i1" src="http://how2j.cn/example.gif" />




1 个答案

喝可乐的鱼 答案时间:2018-03-11
http://how2j.cn/example.gif




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




2018-02-23 绝对定位默认位置的计算
lazytao_
假如我只写一个position:absolute; 不写left、top等内容,那么这个元素的默认位置是怎么计算的?好像并不会是相对于父级元素定位为0,也不是原来它在文档流中的位置








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




2017-11-15 示例2中<p class="abs" >绝对定位的文字</p>这句话为什么不显示在div的框内?走过路过的朋友,请求支援
2017-09-17 示例四,如果想把e单独放下面
2017-06-16 子元素相对于父容器定位的基准点是??
2017-06-16 子元素相对于父容器定位的基准点是??
2016-12-21 示例4的错别字~




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

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

上传截图