问答详情
源自：13-9 Relative与Absolute组合使用

为什么box2高度不受box1限制，宽度受限制？

在box2中输入更多的文字，会发现宽度始终被限制在box1宽度中，而高度则随着文字的增多，行数增加，而向下超出box1。这是什么原理？

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;         
}
#box2{
     position:absolute;
    top:20px;
    left:30px;          
}
</style>
</head>

<body>
<div id="box1">
    <div id="box2">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>


提问者：白石青 2016-12-28 10:49

个回答

  • 慕莱坞7559429
    2016-12-28 11:37:34
    已采纳

    以下纯属个人见解，大牛勿喷，出错请多指教：

    box2设置的是position：absolute，是相对于box1（position：relative）进行定位，但是设置了绝对定位的元素实际上已经脱离文档流，因此box2的宽高实际上不受box1的影响，，在你这段代码里box2的高度是会随着文本的增多而增大，因为你没设置box2自身的宽高，（要想box2内容不超出box1可以设置box2的宽高还有overflow:hidden；）下面我贴出我改的代码，你看下能不能理解：

    解释box2的宽高是由文本撑开决定：

    1. <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;         
}
#box2{
     position:absolute;
    top:0px;
    left:-30px;          
}
</style>
</head>
 
<body>
<div id="box1">
    <div id="box2">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>
      要使得box2的内容不超出box1
    2. <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
    width:200px;
    height:200px;
    position:relative;         
}
#box2{
     position:absolute;
    top:0px;
    left:0px;  
    width: 200px;
    height: 200px; 
    overflow: hidden;       
}
</style>
</head>
 
<body>
<div id="box1">
    <div id="box2">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
</div>
</body>
</html>
      因为不知道你想实现的效果，所以就在这里大致说下，希望能看得懂（有点啰嗦了~~）



    1
  • 慕粉4042427
    2016-12-28 22:55:21

    box2设置了绝对定位，即脱离文档流，其长宽与父级长宽无关，只受其个体所设长宽限制

    1
  • qq_男人重八_0
    2016-12-28 11:10:06

    box1是box2 的父级，box2只能在box1的框架内设置吧！

    0
  • 慕仰0109416
    2016-12-28 11:05:22

    百度一下，你就知道。

    0
  • 慕莱坞7559429
    2016-12-28 11:03:27

    建议提问问题的时候可以附上代码。看代码查找问题比看问题描述快好多。

    0