how2j.cn


工具版本兼容问题
绝对定位
属性:position
值: absolute

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


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

属性: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 :

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

edit
对于 "绝对定位的文字" 这个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 :

如果没有定位了的父容器

edit
"绝对定位的文字" 这个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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
通过绝对定位可以把一个元素放在另一个元素上,这样位置就重复了。

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

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="https://how2j.cn/example.gif" /> <img id="i2" src="https://how2j.cn/example.gif" />


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


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


问答区域    
2020-08-13 答案
JustLc

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .a{ position: absolute; } p.r{ position: relative; left:150px; } </style> </head> <body> <p>正常文字1</p> <p>正常文字2</p> <div class="a"> <p class="r">相对定位的文字3</p> </div> <p>正常文字4</p> <p>正常文字5</p> </body> </html>







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-03-11 这个z-index的图片很皮啊
喝可乐的鱼

<img id="i1" src="http://how2j.cn/example.gif" />




3 个答案

学习自由
答案时间:2022-06-12
后代选择器少了个空格吧

研发之路
答案时间:2019-11-14
<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>
为什么一样的代码,和站长的运行结果·不同呢·

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



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2018-02-23 绝对定位默认位置的计算
2017-11-15 示例2中<p class="abs" >绝对定位的文字</p>这句话为什么不显示在div的框内?走过路过的朋友,请求支援
2016-12-21 示例4的错别字~




提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-CSS-绝对定位 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图