CSS 定位__第六天

请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。


如果您觉得这篇文章还不错,可以去H5专题中查看更多相关文章。

CSS定位

CSS 定位机制

CSS中一共有三种基本定位机制:普通流、浮动、绝对定位。
如果不进行专门指定,所有的标签都在普通流中定位。
块级元素从上到下一个接一个的排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距来调整它们之间的间距。


position属性

通过position属性,我们可以选择4种不同类型的定位,这会影响元素框生成的方式。
包括4个属性值:staticrelativeabsolutefixed

  • static : 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分;行内元素则会创建一个或多个行框,置于其父元素中。
  • relative : 元素框偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍然保留。
  • absoulte : 元素框从文档流中完全删除,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就好像元素不存在一样。元素定位后生成一个块元素,而不论原来它在正常文档流中生成何种类型的框。
  • fixed : 元素框的表现类似将position设置为absoulte,不过其包含块是浏览器窗口。


代码展示

position: static;

staticposition属性的默认值,无特殊定位。均为正常定位。


position: reletive;

HTML代码:

<p class="p1">
    我是p1
</p>
<p class="p2">
    我是p2
</p>
<p class="p3">
    我是p3
</p>

CSS代码:

.p1 {
    position: relative;
    left: 30px;
}
.p2 {
    position: relative;
    right: 30px;
}

效果图:

解释:

  • position: relative;参考的是自己原来得位置。
  • 第一行文字设置postion为relative,这并不会造成什么反应,但是我们还给p1设置了left: 30px;,这就会使元素距离左侧产生30px的间距。
  • 同样,第二行文字设置right: 30px,会使元素距离右侧30px的间距,就产生了跑到屏幕外面的情况
  • 第三方没有做任何处理,正常显示
  • 注意,一定要设置好position: relative;,否则toprightbottomleft是不起作用的。


position: absoulte;

HTML代码:

啦啦啦啦啦
<h1 class="h1">我是h1大标题</h1>

CSS代码:

.h1 {
    position: absolute;
    top: 100px;
    left: 100px;
}

没有设置CSS样式的样子:

设置了CSS样式后的样子:

解释:

  • postion: absolute;参考的是自身的包含块,也就是自己的父视图
  • 当设置了position: absolute;属性之后,标签的位置就变得绝对了。这个时候我们设置toprightbottomleft其中的任何一个属性,都可以设置标签的位置。
  • 注意,一定要设置好position: absolute;,否则toprightbottomleft是不起作用的。


position: fixed;

HTML代码:

<p class="one">
    我是p one
</p>
<p class="two">
    我是p two
</p>

CSS代码:

.one {
    position: fixed;
    top: 100px;
    left: 30px;
}
.two {
    position: fixed;
    top: 50px;
    right: 30px;
}

效果展示:

解释:

  • position: fixed;参考系是浏览器的窗口
  • 当给标签设置了position: fixed;属性之后,这些标签就只会相对于浏览器窗口进行位置的设定,忽略网页的滚动
  • 同样,如果不设置postion: fixed;属性,而是直接设置toprightbottomleft都不会起作用

参考文章:http://www.w3school.com.cn/css/css_positioning.asp

关于界面排布优先级的问题 z-index

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style media="screen">
        div{
          width: 100px;
          font-size: 50px;
          position: absolute;
          height: 100px;
        }
        .a{
          background-color: red;
    
          left: 0;
          top: 0;
            /*设置优先级,数字越大,放置越靠前*/
          z-index: 3;
        }
        .b{
          background-color: blue;
          left: 40px;
          top: 40px;
          z-index: 2;
        }
        .c{
          background-color: green;
          left: 80px;
          top: 80px;
          z-index: 100;
        }
      </style>
    </head>
    <body>
    <div class="a">1</div>
    <div class="b">2</div>
    <div class="c">3</div>
    </body>
    </html>

关于界面元素框偏移
偏移前:

59DF01D8-DE46-4117-8801-16D097657756.png

偏移后:

5C7C68E7-9AFB-4B31-B09C-EED3BACD104D.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        .wrap{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin: 100px;
            padding: 100px;
            position: relative;
            padding-left: 0;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 50px;
            position: relative;
        }
        .content{
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            left: 0;
        }
        </style>
    </head>
    <body>
        <!-- 
        position:absolute;默认是相对于窗口进行定位
         -->
        <div class="wrap">
            <div class="inner">
                <div class="content"></div>
            </div>
        </div>
    </body>
    </html>

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,722评论 1 83
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 1,082评论 0 5
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 4,934评论 0 3
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 12,615评论 32 435
  • 圆角 cornerRadius 注意的是, 在设置 masksToBounds 属性后,layer内部的也都会被这...
    圣斗士皮皮阅读 212评论 1 2