CSS之定位

定位

定位有三种:

1.相对定位 2.绝对定位 3.固定定位

这三种定位,每一种都暗藏玄机,所以我们要一一单讲。

相对定位

相对定位:相对于自己原来的位置定位

现象和使用:

1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别。

2.设置相对定位之后,我们才可以使用四个方向的属性: top、bottom、left、right

所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途:

1.微调元素位置

2.做绝对定位的参考(父相子绝)绝对定位会说到此内容。

 

相对定位:

不脱离标准文档流,可以调整元素
参考点:
以原来的位置为参考点 

CSS之定位
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>相对定位</title>
    <style type="text/css">
        body{
            border: 1px solid orange;
        }
        div{
            width: 200px;
            height: 200px;
            color: #fff;
        }
        div.one{
            background-color: red;
            position: relative;
            top: 30px;
            left: 100px;
        }

        div.two{
            background-color: green;
            position: relative;
            top: 100px;
        }

        div.three{
            background-color: blue;
        }
    </style>
</head>
<body>
    
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</body>
</html>
View Code

 

 

绝对定位

特性:

1.脱标 2.做遮盖效果,提成了层级。设置绝对定位之后,不区分行内元素和块级元素,都能设置宽高。

参考点(重点):

一、单独一个绝对定位的盒子

1.当我使用top属性描述的时候 是以页面的左上角(跟浏览器的左上角区分)为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1.父辈元素设置相对定位,子元素设置绝对定位,那么会以父辈元素左上角为参考点,这个父辈元素不一定是爸爸,它也可以是爷爷,曾爷爷。

2.如果父亲设置了定位,那么以父亲为参考点。那么如果父亲没有设置定位,那么以父辈元素设置定位的为参考点

3.不仅仅是父相子绝,父绝子绝 ,父固子绝,都是以父辈元素为参考点

注意了:父绝子绝,没有实战意义,做站的时候不会出现父绝子绝。因为绝对定位脱离标准流,影响页面的布局。相反‘父相子绝’在我们页面布局中,是常用的布局方案。因为父亲设置相对定位,不脱离标准流,子元素设置绝对定位,仅仅的是在当前父辈元素内调整该元素的位置。

还要注意,绝对定位的盒子无视父辈的padding

作用:页面布局常见的“父相子绝”,一定要会!!!!

 

<!-- 特点:
1.脱离标准文档流,不在页面占位置
2.层级提高,压盖现象
参考点:

相对于最近的非static祖先元素定位,如果没有非static祖先元素,那么以页面根元素左上角进行定位
网站中实战应用:“子绝父相”

-->

 

CSS之定位
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>绝对定位</title>
    <style type="text/css">
        body{
            border: 1px solid orange;
        }
        .grandfather{
            position: relative;
            top: 20px;
            left: 30px;
            border: 1px solid purple;
        }
        .father{
            /*position: relative;
            top: 30px;
            left: 60px;*/
            margin-left: 40px;
            border: 1px solid black;
        }

        .one,.two,.three{
            width: 200px;
            height: 200px;
            color: #fff;
        }

        div.one{
            background-color: red;
            position: absolute;
            top: 200px;
            left: 200px;    
        }
        div.two{
            width: 400px;
            background-color: green;
            /*position: absolute;*/
        }

        div.three{
            background-color: blue;
        }
    </style>
</head>
<body>

     <div class="grandfather">
         <div class="father">
             <div class="one">One</div>
            <div class="two">Two</div>
            <div class="three">Three</div>
         </div>
     </div>
    
</body>
</html>
View Code

绝对定位的盒子居中

当做公式记下来吧!

*{
   padding: 0;
   margin: 0;
}
.box{
   width: 100%;
   height: 69px;
   background: #000;
}
.box .c{
   width: 960px;
   height: 69px;
   background-color: pink;
   *margin: 0 auto;*/
   position: relative;
   left: 50%;
    margin-left: -480px;
   /*设置绝对定位之后,margin:0 auto;不起任何作用,如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位,然后left:50%; margin-left等于元素宽度的一半,实现绝对定位盒子居中*/

  

固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖,提升层级 3.固定不变

参考点:

设置固定定位,用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述,那么是以浏览器的左下角为参考点

作用: 1.返回顶部栏 2.固定导航栏 3.小广告

CSS之定位
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>固定定位</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            color: #fff;
        }
        #one{
            position: fixed;
            top: 80px;
            left: 20px;
        }
        .outer{
            width: 500px;
            height: 300px;
            overflow: scroll;
            padding-left: 200px;
        }
        
    </style>
</head>
<body>
    <!-- 特点:
                1.脱离标准文档流
                2.一旦设置固定定位,在页面中滚动网页,固定不变
            参考点:
                以浏览器的左上角
            应用:
                小广告, 回到顶部  ,固定导航栏
     -->


    <div class="outer">
        <p>
            某女买了一件1000块的衣服。我质疑有点贵。

            她说:“贵?我跟你说,这件衣服原价2000块,打了五折之后便宜一半,就等于我赚了1000块!虽然我花出去1000块,但同时我又赚回来了1000块,所以这件衣服相当于是白送,免费。你懂个屁! ”

            我被她的经济数学头脑震惊得久久说不出话来……
        </p>
        <p>
            国家全面放开生育二胎的政策春风送暖,某机关一张姓女公务员前些天终于怀上二胎了,又一次升级为准妈妈。

            老公让她赶紧跟领导说一下,争取减点工作量,好好保胎。

            午饭时,她在食堂恰好碰见领导,难掩一脸的兴奋汇报:“头儿,我刚怀上小二了”!

            周围突然安静下来了。领导楞了半天回过神来,憋出了一句:“你老公知道了吗?”

            她脑抽地答了一句:“是他让我找你的”……

            食堂里瞬间鸦雀无声!
            此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!此处省略5000字!!
        </p>
        <div class="box" id="one">One</div>
    </div>

</body>
</html>
View Code

 

上一篇:华为重磅发布5G核心芯片天罡,全球首款5G折叠屏手机2月面世


下一篇:Greendao 缓存问题