position 定位

时间 2019-11-17

标签 position 定位栏目 CSS 繁體版

原文原文链接

position 属性的五个值：css

static relative fixed absolute stickyhtml

absolute 定位

绝对定位的元素的位置相对于最近的已定位父元素，若是元素没有已定位的父元素，那么它的位置相对于<html>浏览器

h2 {ide

position:absolute;spa

left:100px; code

top:150px;htm

}文档

absolute 定位使元素的位置与文档流无关，所以不占据空间。string

absolute 定位的元素和其余元素重叠。it

static 定位

HTML元素的默认值，即没有定位，元素出如今正常的流中。

静态定位的元素不会受到 top, bottom, left, right影响

div.static{

position: static;

border: 3px solid #73AD21;

}

fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即便窗口是滚动的它也不会移动

p.pos_fixed {

position:fixed;

top:30px;

right:5px;

}

Fixed定位使元素的位置与文档流无关，所以不占据空间。

Fixed定位的元素和其余元素重叠

relative 定位

相对定位元素的定位是相对其正常位置。

h2.pos_left {

position:relative;

left:-20px;

}

h2.pos_right {

position:relative;

left:20px;

}

相对定位元素常常被用来做为绝对定位元素的容器块。

-------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        * { /* 通配符选择器 */
            margin: 0;
            padding: 0;
        }

        #box-1{
            border: 1px solid red;
           /* margin: 0 auto;*/
            margin-left: 600px;
            width: 50%;
            height: 300px;
            background-color: #9AA4FF;
           /* float: left;*/
           /* display: inline-block;*/
        }

        #box-2{
            border: 1px solid greenyellow;
            width: 20%;
            height: 300px;
            background-color: orange;

           /* display: inline-block;*/

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

        #box-2 .span-1{
            border: 2px solid salmon;
        }
    </style>
</head>

<body>
  <div id="box-1">
      嘿嘿嘿
  </div>

  <div id="box-2">
      <span class="span-1">哈哈哈</span>
  </div>

</body>
</html>