position的属性值absolute的问题

第一个问题 position:absolute相对定位,定位对象是relative和fixed之间的区别。第二的问题 还有就是我分别设置了relative和fixed,在fixed替换成relative之后所设置的margin水平居中就失效了。
这是定为对象为relative的代码和效果图

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>        
    <style type="text/css">
        .box {width:500px; height:300px; border:1px solid red; margin:50px auto 0;
              position:relative;    
            }
        .content {width:300px; height:150px; border:2px solid blue; background:#ccc;
                  position:absolute;
                  left:30px;
                  top:50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            绝对定位
        </div>
    </div>
</body>
</html>

图片描述

这是把父级框的position的属性relative替换为fixed之后的代码和效果图。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>        
    <style type="text/css">
        .box {width:500px; height:300px; border:1px solid red; margin:50px auto 0;
              position:fixed;    
            }
        .content {width:300px; height:150px; border:2px solid blue; background:#ccc;
                  position:absolute;
                  left:30px;
                  top:50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="content">
            绝对定位
        </div>
    </div>
</body>
</html>

图片描述

阅读 2.9k
1 个回答

用了定位后,是不能通过magrin:0 auto;来实现居中的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题