使用相对位置(relative)无法叠层的问题(附超简单代码)

jackker 2010-05-11 01:50:36
测试代码如下:

<div id="box" style="width:300px;height:300px;border:1px solid black;position:absolute;left:1px;top:1px;">
<div id="box1" style="width:100px;height:100px;border:1px solid red;position:relative;left:10px;top:10px;z-index:1;">box1</div>
<div id="box2" style="width:100px;height:100px;border:1px solid blue;position:relative;left:15px;top:15px;z-index:2;">box2</div>
</div>



一个box,里面包含了box1与box2,
box1相对box位置left:10 top:10;
box2相对box位置left:15 top:15;

我想要的结果是box2叠住,覆盖box1。而实际的情况则是没有实现,z-index属性毫无用处。

如何实现我想要的?

前提是:
1,不能将box1和box2移出box
2,box1和box2位置要相对box来决定(也就是位置不能定义为absolute)。
...全文
130 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
ddcatlee 2010-05-11
  • 打赏
  • 举报
回复
box定位以后 box1和box2的绝对定位,就是相对于box了
zdthnc 2010-05-11
  • 打赏
  • 举报
回复
relative是相对静态位置的,不可能是相对父级容器定位的
passself 2010-05-11
  • 打赏
  • 举报
回复

<div id="box" style="width:300px;height:300px;border:1px solid black;position:relative;left:1px;top:1px;">
<div id="box1" style="width:100px;height:100px;border:1px solid red;position:absolute;left:10px;top:10px;z-index:10;">box1</div>
<div id="box2" style="width:100px;height:100px;border:1px solid blue;position:absolute;left:12px;top:12px;z-index:200;">box2</div>

不用absolute是不可能实现你那样的效果
bhbhxy 2010-05-11
  • 打赏
  • 举报
回复
<div id="box" style="width:300px;height:300px;border:1px solid black;position:relative;left:1px;top:1px;">
<div id="box1" style="width:100px;height:100px;border:1px solid red;position:absolute;left:10px;top:10px;z-index:1;">box1</div>
<div id="box2" style="width:100px;height:100px;border:1px solid blue;position:absolute;left:15px;top:15px;z-index:2;">box2</div>

dx_1210 2010-05-11
  • 打赏
  • 举报
回复
position:relative这个本能重叠的吧


position : static | absolute | fixed | relative
取值:
static : 默认值。无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置
dx_1210 2010-05-11
  • 打赏
  • 举报
回复
position:relative这个本能重叠的吧


position : static | absolute | fixed | relative
取值:
static : 默认值。无特殊定位,对象遵循HTML定位规则
absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧