CSS一篇文章搞懂系列5:开启定位position,让你的内容所心所欲的处于页面任何位置

一、意义:

除了设置浮动可以对页面布局之外,又增加定位(position)来使布局可以分布在页面的任意位置,并且不脱离文件流


  
    position:可选值:(都会提升到与父类相对的层级)
       |--static,默认值关闭定位

       |--relative,相对定位,参考原来的位置,用top、right这一类设置偏移量,只是位置发生改变其它不变
       |--sticky,粘滞定位,相对定位的一种,滚动到一个位置就粘在那里不变了

       |--absolute,绝对定位,块变成行,并且是相对与离他最近的开启了定位的块祖先类的偏移量
       |--fixed,固定定位,绝对定位的一种,相对的是浏览器的视口,即屏幕,所以即使网页滚动,也不动
    top(bottom):0 px;
    right(left):0 px;

    位置:
     如果设置的高宽大小有误,不符合等式,但是又没有那个设置了auto,那么自动调节right值、left值,垂直同理

    层级:类似于层叠的一层一层。上一层显示会盖住下一层
    Z-index:指定层级,父类无论如何设定都不会盖住子类。层级大的覆盖小的





<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
        body{
      
            height: 2000px;
        }
        .box{
      
            background-color: burlywood;
            width: 200px;
            height: 200px;
            

        }

        .box2{
      
            background-color: yellow;
            width: 400px;
            height: 400px;
            position: relative;

            /*
            如果块2设置成绝对定位的话就变成行内元素
            块4的位置也会跑上去
            */
            z-index: 3;
            
            
        }

        .box3{
      
            background-color: green;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 200px;
            /*此时似乎没有bottom这个位置*/
            left: 200px;
            
        }

        .box4{
      
            background-color: red;
            width: 200px;
            height: 200px;

            position:fixed;
            top:0px;
            left:200px; 
           
        }

        .box5{
      
            background-color: blue;
            width: 200px;
            height: 200px;

            position:sticky;
            top:200px;
            left:200px;
        }
        
        
    style>
head>
<body>

    <div class="box">
        1
    div>
    <div class="box2">2
        <div class="box3">3div>
    div>

    <div class="box4">4div>
    <div class="box5">5div>
    
body>
html>

你可能感兴趣的:(前端学习)