一段测试position：fixed属性的代码。发现了2个问题，求老师或高手指点。万分感谢！

问题：

（1）设置CSS代码中#box2为 position:fixed; left:50; top:50; 后，box2并没有以浏览器可视窗口为基准偏移。box2还是跟着box1并么有脱离文档流。只是跟后面的box3脱离了标准文档流。

（2）故意在body后添加一大堆text<br/>,测试box2在设置position:fixed; left:50; top:50; 后可否让前面的box1通过，发现box2直接不显示了。

代码如下 html代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/absolute_layout.css"/>
<title>Absolute Test</title>
</head>
<body>

<div id="wrap_out">
       <div id="wrap_in">
               <div id="box1">box1</div>
               <div id="box2">box2</div>
               <div id="box3">box3</div>
         </div>
</div>
</body>

CSS文件内的代码

@charset "utf-8";
/* CSS Document */
*{ padding:0px; margin:0px;}
#wrap_out{
   background:lightseagreen; height:600px; width:80%;
   margin:0 auto; border:3px solid #000000;
}
#wrap_in{
       background: lightblue; height: 500px;   width: 70%;
       margin: 0 auto; border: 3px solid #000000;
}
#box1{
    background: lightsalmon;
    height:30%;
}
#box2{
    background: lightcoral;
    height:30%;
   position:fixed; left:50; top:50;
}
#box3{
    background:lightgreen;
    height:30%;
}

求高手解答，谢谢！

edward12

浏览 1436回答 1

1回答

edward12

我知道原因了left:50; top:50;漏了写px，谢谢大家

1 0

随时随地看视频慕课网APP