Css中的Position属性

时间：2022-10-14 21:45:32

Css中的Position属性

　　　　Css属性在线查询地址：

http://www.css88.com/book/css/properties/index.htm

CSS 中的 position 属性

在英语中 position 是指位置，方位;

在Html语言中position 是指（定位元素）

------------------
position有四个取值属性：position : static | absolute | fixed | relative

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

Css中的Position属性

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

static
默认值。无特殊定位，对象遵循HTML定位规则（忽略 top, bottom, left, right 或者 z-index 声明）。

absolute
将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body对象。而其层叠通过z-index属性定义
要激活对象的绝对(absolute)定位，必须指定 left ， right ， top ， bottom 属性中的至少一个，并且设置此属性值为 absolute 。

fixed
当position属性设为fixed后，元素就按照浏览器的窗口进行定位。

relative
对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

如果不设置relative属性，sub1的位置按照正常的文档流，它应该处于某个位置。但当设置sub1为的position为relative后，将根据top，right，bottom，left的值按照它理应所在的位置进行偏移，relative的“相对的”意思也正体现于此。对于此，您只需要记住，sub1如果不设置relative时它应该在哪里，一旦设置后就按照它理应在的位置进行偏移。

----------------------
4. static
position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

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

===================================================

这是Position属性中的absolute

<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
#position {
    position: absolute;
    top: 50px;
    left: 120px;
    width: 180px;
    height: 40px;
    margin: -20px 0 0 -75px;
    padding: 0 10px;
    background: blue;
    line-height: 2;
}
</style>
</head>
<body>
<div id="position">我是absolute对象</div>
</body>
</html>

Css中的Position属性

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

<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
h2
{
    position:absolute;
    left:100px;
    top:50px;
    background: yellow;
}
</style>
</head>

<body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部50 px的元素。.</p>
</body>

</html>

Css中的Position属性

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

<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
.z1,
.z2,
.z3 {
    position: absolute;
    width: 200px;
    height: 100px;
    padding: 5px 10px;
    color: #fff;
    text-align: right;
}
.z1 {
    z-index: 1;
    background: #000;
}
.z2 {
    z-index: 2;
    top: 30px;
    left: 30px;
    background: #C00;
}
.z3 {
    z-index: 3;
    top: 60px;
    left: 60px;
    background: #999;
}
</style>
</head>
<body>
<div class="z1">z-index:1</div>
<div class="z2">z-index:2</div>
<div class="z3">z-index:3</div>
</body>
</html>
<html>
  <head>
    <title>CSS绝对定位</title>
    <style type="text/css">
        #top_Div{
            position:absolute;    /*绝对定位*/
            left:20px;            /*距离左侧页面50px*/
            top:10px;            /*距离顶部页面10px*/
        }
        #bottom_Div{
            position:absolute;    /*绝对定位*/
            left:130px;            /*距离左侧页面130px*/
            top:10px;            /*距离顶部页面10px*/
        }
    </style>
  </head>
  <body>
    <div id="top_Div">
        我是绝对定位1
    </div>
    <div id="bottom_Div">
        我是绝对定位2
    </div>
  </body>
</html>

Css中的Position属性

===================================================

这是Position属性中的 static

===================================================

这是Position属性中的 fixed

===================================================

这是Position属性中的 relative

<html>
<head>
<title>显示的页面选项卡标题</title>
<style type="text/css">
<style>
h2.pos_left
{
    position:relative;
    left:-20px;
}

h2.pos_right
{
    background: red;
    position:relative;
    left:20px;
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left" style="background: green;">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>

</body>

</html>

Css中的Position属性

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

===========================================================

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

相关文章