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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。