我不知道的css position

css的position有以下几个值:

absolute(绝对定位)

  • 元素会脱离文档流,不占用原本的空间,后面的元素会顶上去
    在这里插入图片描述

  • 不论元素是行内还是块级元素,都会生产一个块级框。通过指定元素相对于最近的非 static 定位祖先元素的偏移,来确定元素位置。

<!DOCTYPE html>
<head>
    <style>
        #father{
            background: yellow; 
            position: absolute; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!-- span是内联元素 本来是不能设置宽和高的,但是现在可以了 -->
    <span id="father"></span>
</body>
</html> 

在这里插入图片描述

  • 元素不占据父容器,是相对于最近的且不是static定位的父元素来定位,往上追溯就是body元素
<!DOCTYPE html>
<head>
    <style>
        #father{
            background: yellow; 
            position: absolute; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
        #son{
            background: hotpink; 
            position: absolute; 
            width: 200px; 
            height: 100px; 
        
        }
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html> 

在这里插入图片描述

relative

  • 该关键字下,元素先放置在未添加定位时的位置,再在不改变页面布局的前提下调整元素位置(因此会在此元素未添加定位时所在位置留下空白)。元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留。
 <!DOCTYPE html>
<head>
    <style>
        #father{
            background: yellow; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father"></div>
    <span>元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素会根据top,left,bottom,right进行偏移,它原本的空间仍然保留元素</span>
</body>
</html> 

在这里插入图片描述
 

  • 相对定位,元素不占据父容器空间,相当于文档body定位(如果元素的父级节点中有position不等于static的,则相对于最近的非static父节点定位)
<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            position: static; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
    
        #son{
            background: blueviolet; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1">
       <div id="son"></div>
    </div>
</body>
</html> 

在这里插入图片描述

<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
    
        #son{
            background: blueviolet; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1">
       <div id="son"></div>
    </div>
</body>
</html> 

在这里插入图片描述

<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
    
        #son{
            background: blueviolet; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1">
       <div id="son"></div>
    </div>
</body>
</html> 
  • 如果父元素是relative或者fixed,那么position为relative的子元素会脱离文档流
<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            position: absolute; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
    
        #son{
            background: blueviolet; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1">
       <div id="son"></div>
    </div>
    绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动
   
</html> 

 

fixed

  • 绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动。
<!DOCTYPE html>
<head>
    <style>
        #father1{
            background: greenyellow; 
            position: fixed; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
    
        #son{
            background: blueviolet; 
            position: relative; 
            width: 200px; 
            height: 100px; 
            top: 20px; 
            left: 50px;
        }
       
    </style>
    <title></title>
</head>
<body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <div id="father1">
       <div id="son"></div>
    </div>
    绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动
    绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动绝对定位,是相对于浏览器窗口来定位的,是固定的,不会跟屏幕一起滚动
</body>
</html> 

 

static

  • 浏览器默认的属性,元素(content)就以正常的 normal flow 形式呈现,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。

 

Inherit

  • 继承父元素的position值。
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页