css position精准定位特性

2021-03-18 00:35 jianzhan

表明

Position 特性:要求元素的精准定位种类。即元素摆脱文本文档流的合理布局,在网页页面的随意部位显示信息。

关键的值

①absolute :肯定精准定位;摆脱文本文档流的合理布局,遗留下下来的室内空间由后边的元素填充。精准定位的起止部位为近期的父元素(postion不为static),不然为Body文本文档自身。

②relative :相对性精准定位;不摆脱文本文档流的合理布局,只更改本身的部位,在文本文档流本来的部位遗留下空白地区。精准定位的起止部位为此元素本来在文本文档流的部位。

③fixed :固定不动精准定位;相近于absolute,但不伴随着翻转条的挪动而更改部位。

④static :默认设置值;默认设置合理布局。

輔助特性

position特性只是使元素摆脱文本文档流,要想此元素能依照期待的部位显示信息,就必须应用下面的特性(position:static不适用这些):

①left : 表明向元素的左侧插进是多少像素,使元素向右挪动是多少像素。

②right :表明向元素的右侧插进是多少像素,使元素向左挪动是多少像素。

③top :表明向元素的上方插进是多少像素,使元素向下挪动是多少像素。

④bottom:表明向元素的正下方插进是多少像素,使元素向上挪动是多少像素。

上面特性的值能够为负,企业:px 。

position 精准定位方法

position:absolute

表明

肯定精准定位;摆脱文本文档流的合理布局,遗留下下来的室内空间由后边的元素填充。精准定位的起止部位为近期的父元素(postion不为static),不然为Body文本文档自身。

主视图

position:relative

表明

相对性精准定位;不摆脱文本文档流的合理布局,只更改本身的部位,在文本文档流本来的部位遗留下空白地区。精准定位的起止部位为此元素本来在文本文档流的部位。

主视图

position:fixed

表明

固定不动精准定位;相近于absolute,但不伴随着翻转条的挪动而更改部位。

主视图

运用情景

①登陆框遮盖层:如dz论坛的登陆。

②虚报QQ信息广告宣传。

position:static

表明

默认设置精准定位,表明此元素为默认设置精准定位方法。

运用情景

IE6的独特解决。

总结

翻转条是不是出現

当含有position特性的元素为最边沿元素时:

①absolute 和relative :含有此2个值的边沿元素,访问器变小到此元素不能见时,会出現翻转条。

②fixed :含有此值的边沿元素,访问器变小到此元素不能见时,不容易出現翻转条。

 示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>position</title>
    <style type="text/css">
        div
        {
            height: 200px;
            width: 300px;
            border-color: Black;
            border-style: solid;
            border-width: 1px;   
         }
        
         #a
        {
            position:absolute;
            left:900px;
            top:150px;
        }
        #b
        {
            position:relative;
            left:500px;
            top:100px;
        }
        #c
        {
            position:fixed;
            left:970px;
            top:400px;
         }
         #d
         {
            position:static;    
            background-color:Window;    
         }

    </style>
</head>
<body>
  <div id="a" >
    div-a<br />
    position:absolute;<br />
    肯定精准定位;摆脱文本文档流,遗留下室内空间由后续元素填充。
  </div>
  <div id="b" >
    div-b<br />
    position:relative;<br />
    相对性精准定位;不摆脱文本文档流,只更改本身的部位,在文本文档流本来的部位遗留下空白地区。
  </div>
  <div id="c" >
    div-c<br />
    position:fixed;<br />
    固定不动精准定位;固定不动在网页页面中,不随访问器的尺寸更改而更改部位。
  </div>
  <div id="d"></div>
  <input type="text" value="input1" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。