首页 > 其他分享> > css定位布局

css定位布局

2022-08-12 14:34:46 作者：互联网

定位position

概念：是一种布局方式，主要用来确定元素的位置。
作用
- 解决是具有层级叠加（覆盖）效果的布局。

实现方式

通过给元素添加position属性,并且定位位置调整都是配合left, top, right, bottom四个属性来使用的。
- position用来设置定位元素的参照物。
- left, top, right, bottom用来设置定位元素相对于参照物横向和纵向距离。
```
#mark{
     width: 100px;
     height: 100px;
     background-color: salmon;
     //设置定位的参照物
     position: relative;
     //设置元素相对于参照物的横向和纵向距离
     left: 100px;
     top: 50px;				
 }
```

position定位参照物的取值

relative 相对定位

特点:
- 相对定位的元素会提升层级，但是不会脱离文档流,所以会为其保留位置。
- 相对定位是相对于元素自身原来的位置进行位置调整。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        /* 相对定位 测试!!!!!*/
        #relative{
            width: 100px;
            height: 100px;
            background-color: salmon;
            position: relative;
            left: 100px;
            top: 50px;				
        }			
        #two{
            width: 150px;
            height: 150px;
            background-color: seagreen;
        }
     
    </style>
</head>
<body>
    <!-- relative 相对定位
        a.不会脱离文档流
        b.为其保留原始位置
        c.移动的是相对自身位置进行移动
        d.不会影响盒模型	
    -->
    <div id="relative"></div>
    <div id="two"></div>
</body>
</html>

浏览器效果

absolute 绝对定位

特点:
- 脱离文档流,所以不会为其保留位置。

实现

未设置position:absolute;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #absolute {
                width: 100px;
                height: 100px;
                background-color: red;
            }
            #one {
                width: 150px;
                height: 150px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="absolute"></div>
        <div id="one">这是标签one</div>
      
    </body>
</html>

设置position:absolute;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #absolute {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 20px;
                top: 100px;
            }
            #one {
                width: 150px;
                height: 150px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="absolute"></div>
        <div id="one">这是标签one</div>
      
    </body>
</html>

浏览器效果

注意：绝对定位的定位参照物不一定是父级元素，如果想要让绝对定位的参照物为父级元素，此时父级元素必需设置position为relative，absolute或者fixed。

父级元素未设置position时，默认以浏览器窗口为参考进行位置移动。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            } 
            #absolute {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 20px;
                top: 100px;
             }
            #one {
                width: 150px;
                height: 150px;
                background-color: yellow;
            }
            #a{
            	width: 350px;
            	height: 300px;
            	background-color: deeppink;	
            }
            #b{
            	width: 250px;
            	height: 250px;
            	background-color: lightcoral;
            }
            #c{
            	width: 150px;
            	height: 150px;
            	background-color: deepskyblue;
            	position: absolute;
            	left: 30px;
            	top: 30px;
            }
        </style>
    </head>
    <body>
        <div id="absolute"></div>
        <div id="one">这是标签one</div>
        <div id="a">
      	  <div id="b">
      		<div id="c">这是设置了绝对定位的标签</div>
      	</div>
      </div>
    </body>
</html>

父级元素设置position时，此时以父级元素为定位参照物。

如果其父标签已经设置了除静态定位之外的其他定位，那么就以父标签为参考进行位置移动。

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                } 
                #absolute {
                    width: 100px;
                    height: 100px;
                    background-color: red;
                    position: absolute;
                    left: 20px;
                    top: 30px;
                 }
                #one {
                    width: 150px;
                    height: 150px;
                    background-color: yellow;
                }
                #a{
                	width: 350px;
                	height: 300px;
                	background-color: pink;
                    padding: 30px;
                }
                //#b是#c的父级此时#c的选择器定位参照物为#b对应的父级元素
                #b{
                	width: 250px;
                	height: 250px;
                	background-color: greenyellow;
                    position: relative;
                }
                #c{
                	width: 150px;
                	height: 150px;
                	background-color: deepskyblue;
                	position: absolute;
                	left: 30px;
                	top: 30px;
                }
            </style>
        </head>
        <body>
            <div id="absolute"></div>
            <div id="one">这是标签one</div>
            <div id="a">这是第b的父标签a
          	  <div id="b">这是c的父标签b
          		   <div id="c">这是设置了绝对定位的标签c</div>
          	</div>
          </div>
        </body>
    </html>

如果多个相邻标签都设置绝对定位,层级如何显示?
- 绝对定位的元素会脱离文档流，提升层级。

相邻的标签都设置了绝对定位,越晚设置定位的层级越靠上。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            /*兄弟标签 绝对定位*/
            #div1 {
                width: 150px;
                height: 150px;
                background-color: yellowgreen;
                position: absolute;
                left: 10px;
                top: 10px;
            }

            #div2 {
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                left: 10px;
                top: 10px;
            }

            #div3 {
                width: 50px;
                height: 50px;
                background-color: green;
                position: absolute;
                left: 10px;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <!--兄弟标签连续绝对定位 -->
        <div id="div1">1111111</div>
        <div id="div2">2222</div>
    	<div id="div3">333</div>
    </body>
</html>

z-index属性可以调整定位后标签的显示层级。默认z-index的值都为0;值越大，层级越靠上。例如:给div2设置z-index:1; 那么div2就会在最上层显示。
```
 #div2 {
     width: 100px;
     height: 100px;
     background-color: yellow;
     position: absolute;
     left: 10px;
     top: 10px;
     z-index: 2;
}
```

fixed固定定位

设置固定定位之前的样式

特点:固定定位是相对于浏览器窗口进行位置调整,并且会脱离文档流.不会随着页面滚动而滚动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            body{
                height: 3000px;
            }
            #fixed {
                width: 100px;
                height: 300px;
                background-color: sandybrown;
                position: fixed;
                left: 200px;
                top: 100px;
            }
            #one {
                width: 500px;
                height: 500px;
                background-color: skyblue;
            }
        </style>
    </head>
    <body>
       <div id="fixed">这是一个设置了固定定位的div</div>    
       <div id="one">这是一个普通的div</div>
    </body>
</html>

课堂综合练习

小米官网轮播图模块的定位效果:

超链接的四种状态

作用:用来修改超链接的访问状态.
:link 该选择器能找到所有定义了超链接且没有被访问过的元素.只适用于a标签.
:visited 该选择器能找到所有定义了超链接且已经被访问过的元素.只适用于a标签.
:hover 该选择器能找到鼠标移动到其上面的元素.任意标签都适用.
:active 该选择器能找到鼠标在其上面点击按下且不松开的元素.任意标签都适用.
注意:以上选择器,如果对同一个标签用了两个包含两个以上就要遵循以下顺序来设置!
- link-visited-hover-active

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>伪类选择器</title>
        <style type="text/css">
            a {
                margin: 0 20px;
            }
            /*1. :link 该选择器能找到所有定义了超链接且没有被访问过的元素   只适用于a标签*/
            a:link {
                color: deeppink;
            }
            /*2. :visited 该选择器能找到所有定义了超链接 且已经被访问过的元素   只适用于a标签*/
            a:visited {
                color: deepskyblue;
            }
            /*3. :hover 该选择器能找到鼠标移动到其上面的标签    任意标签都适用*/
            a:hover {
                color: darkgreen;
            }
            /*4. :active 该选择器能找到鼠标在其上面点击按下且不松开的元素   任意标签都适用*/
            a:active {
                color: red;
            }
            #one {
                width: 200px;
                height: 200px;
                margin: 100px;
                background-color: skyblue;
            }
            #one:hover{
                background-color: red;
            }
            #one:active{
                background-color: #006400;
            }
        </style>
    </head>
    <body>
        <a href="http://www.jd.com">京东</a>
        <a href="http://www.taobao.com">淘宝</a>
        <a href="http://www.tianmao.com">天猫</a>
        <a href="http://www.sohu.com">搜狐</a>
        <a href="http://www.huaban.com">百度</a>
        <div id="one"></div>
    </body>
</html>