当前位置：首页 → 问答吧 → 关于POSITON(relative/absolute)问题

关于POSITON(relative/absolute)问题

时间：2007-03-07

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> *{margin:0;padding:0;color:#FF00FF} #A,#B{position:relative;background:#ccc;margin:50px 100px;height:150px;} #C{position:absolute;right:0;top:0;width:200px;height:500px;background:GREEN;z-index:100;color:#fff;zoom:1} </style> </head> <body> <div id="A">A区域是position:relative; <div id="C">C块是A中包含，position:absolute;当C高度超过A时，B被A挡住，</div> </div> <div id="B">B区域是position:relative; </div> </body> </html>
提示：您可以先修改部分代码再运行

出现的问题:
层A是层C的父元素,层A用的是相对定位relative,层C用的是绝对定位position,层B是和层A同级的,并且是相对定位,如果层C的高度超过层A的高度,那么层C的超出部分就会和层C交错重叠

请问:
如何让相对定位的层A 自动适应绝对定位的层C 的高度,并且让层B不和层C重叠.

PS:如果用JS方法解决或其它方法,请大家写一下~~谢谢了

[ 本帖最后由 cc8337 于 2007-3-7 12:54 编辑 ]

作者: cc8337 发布时间: 2007-03-07

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> *{margin:0;padding:0;color:#FF00FF} #A,#B{position:relative;background:#ccc;margin:50px 100px;height:150px;} #A {z-index:6;} #B {z-index:1;} #C{position:absolute;right:0;top:0;width:200px;height:500px;background:GREEN;z-index:100;color:#fff;zoom:1} </style> </head> <body> <div id="A">A区域是position:relative; <div id="C">C块是A中包含，position:absolute;当C高度超过A时，B被A挡住，</div> </div> <div id="B">B区域是position:relative; </div> </body> </html>
提示：您可以先修改部分代码再运行

把父层的等级排一下就可以

作者: 小毅发布时间: 2007-03-07

这是什么问答题吗？
为何有两人来问！-______-!!

参考：http://bbs.blueidea.com/thread-2724143-1-2.html

作者: snwebsite 发布时间: 2007-03-07

谢谢楼上2位热心人~~回楼上,我这个代码是搬的那位老兄的,但问的问题不一样
我想让层A的度高自动适应层C的高度,另外不能改变层A的相对定位和层C的绝对定位,
我要实现如下图所式,另外层C的高度是未知~~

[ 本帖最后由 cc8337 于 2007-3-7 13:22 编辑 ]

作者: cc8337 发布时间: 2007-03-07

那就不要用 position ,因为absolute不会根据父层的高度来设定自身的高度的

作者: 小毅发布时间: 2007-03-07

谢谢楼上

我这边程序员解决了...不过听起来复杂...
思路如下
当层C的高度大于层A的高度,那么层A的高度等于层C-层A+现在的高度
当层A的高度大于层C的高度,那么不变

代码如下,不是顶楼例子,具体的看上面的思路

footer相当于顶楼的层B ,Layer_content是层C,sidebar是层A里的另一个相对定位层

function change_size(){
//document.getElementById("footer").style.visibility="hidden"
//setTimeout("change_hight()",3000)



      if(document.getElementById("Layer_content"))
      {
            if (document.getElementById("sidebar").offsetHeight < document.getElementById("Layer_content").offsetHeight)
            {
               document.getElementById("bottom_top").style.height = document.getElementById("Layer_content").offsetHeight -document.getElementById("sidebar").offsetHeight+100
            }
      }

      if(document.getElementById("Layer_content2"))
      {
              if (document.getElementById("sidebar").offsetHeight < document.getElementById("Layer_content2").offsetHeight)
            {
               document.getElementById("bottom_top").style.height = document.getElementById("Layer_content2").offsetHeight -document.getElementById("sidebar").offsetHeight+100
            }
      }

}

function change_hight(){
//document.getElementById("footer").style.visibility="visible"
//document.getElementById("sidebar").style.height = document.body.scrollHeight;
}

[ 本帖最后由 cc8337 于 2007-3-7 14:23 编辑 ]

作者: cc8337 发布时间: 2007-03-07

提醒:最后回贴距现在 1675 天，请不要无意义回复

作者: shw3588 发布时间: 2011-10-06