澳门新葡萄京www27111com


工具版本兼容问题
绝对定位
属性: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>
 澳门新葡萄京www27111com www.prowz.com <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://www.prowz.com/example.gif" /> <img id="i2" src="http://www.prowz.com/example.gif" />


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


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


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




1 个答案

喝可乐的鱼 答案时间:2018-03-11
http://www.prowz.com/example.gif




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




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




1 个答案

学生new 答案时间:2018-06-25
当然会按顺序显示在上下两条语句之间。




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




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

上传截图