【CSS 基础】 12 position

概述

position 属性规定元素的定位类型。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

相对定位

position:relative;
  • 参照元素原来的位置进行移动
  • 通过"left"、 "top"、 "right"、 "bottom" 属性进行定位
  • 元素原有的空间位保留
  • 元素在移动时会盖住其他元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bd1{
                width: 120px;
                height: 120px;
                background: #E19D59;
            }
            #bd2{
                width: 120px;
                height: 120px;
                background: #FF0000;
                position: relative;
                left: 20px;
                top: 20px;
            }
            #bd3{
                width: 120px;
                height: 120px;
                background: #008000;
            }
        </style>
    </head>
    <body>      
        <div id="bd1"></div>
        <div id="bd2"></div>
        <div id="bd3"></div>        
    </body>
</html>
相对定位效果图

绝对定位

position:absolute;
  • 参照距离他最近的有定位属性的父级元素进行移动
  • 通过"left"、 "top"、 "right"、 "bottom" 属性进行定位
  • 元素完全脱离文档流,原有位置不再保留
  • 元素在移动时会盖住其他元素
  • 一般我们设置绝对定位时,都会找一个合适的父级将其设置为相对定位。最好为这个具有相对定
    位属性的父级设置宽高
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bd1{
                width: 120px;
                height: 120px;
                background: #E19D59;
            }
            #bd2{
                width: 120px;
                height: 120px;
                background: #FF0000;
                position: absolute;
                left: 20px;
                top: 20px;
            }
            #bd3{
                width: 120px;
                height: 120px;
                background: #008000;
            }
        </style>
    </head>
    <body>      
        <div id="bd1"></div>
        <div id="bd2"></div>
        <div id="bd3"></div>        
    </body>
</html>
绝对定位效果图

固定定位

  • 以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位
  • 通过"left"、 "top"、 "right"、 "bottom" 属性进行定位
  • 元素完全脱离文档流,原有位置不再保留
  • 元素不会随着文档流的滑动而滑动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style type="text/css">
            #content1{
                width: 120px;
                height: 2000px;
                background: #008000;
            }
            #content2{
                width: 120px;
                height: 2000px;
                background: #E19D59;
            }
            
            #ad{
                width: 120px;
                height: 120px;
                background: #000000;
                position: fixed;
                bottom: 100px;
                right: 100px;
            }
        </style>
    </head>
    <body>      
        <div id="content1"></div>
        <div id="content2"></div>       
        <div id="ad"></div>     
    </body>
</html>
固定定位效果图

微信公共号

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,844评论 1 86
  • 转自大漠老师博客,如需转载烦请注明出处:英文原文:http://learn.shayhowe.com/advanc...
    抱着熊喵啃什么阅读 231评论 0 3
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    hiuman阅读 241评论 0 1
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 148评论 0 1
  • 当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术,很大程序上取决于内容和目标页面,因为有很多技术比别人...
    lulu_c阅读 343评论 0 5