css position定位

最新推荐文章于 2024-04-25 18:45:11 发布

chunchuo8935

最新推荐文章于 2024-04-25 18:45:11 发布

阅读量65

点赞数

原文链接：https://my.oschina.net/u/2256193/blog/755715

版权

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

相对定位：relative 没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

绝对定位：ablution 脱离了文档流与浮动模型，独立于其他对象而存在，没有占位。

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

<!DOCTYPE html>
<html >
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>position</title>
    <style type="text/css">
        <!--
        body{
            font-size:12px;
            margin:0 auto;
        }

        div#demo{
            position:relative;
            border:1px solid #000;
            margin:50px;
            top:-50px;
            line-height:18px;
            overflow:hidden;
            clear:both;
            height:1%;
        }

        div#sub{
            position:absolute;
            right:10px;
            top:10px;
        }

        div.relative{
            position:relative;
            left:400px;
            top:-20px;
        }

        div.static,div.fixed,div.absolute,div.relative{
            width:300px;
        }

        div.static{
            background-color:#bbb;
            position:static;
        }

        div.fixed{
            background-color:#ffc0cb;
        }

        div.absolute{
            background-color:#b0c4de;
        }

        div.relative{
            background-color:#ffe4e1;
        }
        -->
    </style>
</head>
<body>
<div id="demo">
    <div class="static">static: 默认值。无特殊定位，对象遵循HTML定位规则 </div>
    <div id="sub" class="absolute">absolute: 将对象从文档流中拖出,使用left,right,top,bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据body对象。而其层叠通过z-index属性定义 </div>
    <div class="fixed">fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范 </div>
    <div class="relative">relative:对象不可层叠，但将依据 left,right,top,bottom 等属性在正常文档流中偏移位置 </div>
</div>
<p  style="height: 100px;background-color: #009dc7">
    2321313131
</p>
</body>
</html>

转载于:https://my.oschina.net/u/2256193/blog/755715

chunchuo8935

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css position定位

1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）相对定位：relati...
复制链接

扫一扫

css position定位

“相关推荐”对你有帮助么？