css定位布局

定位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固定定位

    • 设置固定定位之前的样式

      8

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

      <!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>

posted @ 2022-08-12 14:17  就要吃土豆丶  阅读(91)  评论(0)    收藏  举报