解读Position

2018-06-24 00:19:42来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

首先Position在字面讲是位置的意思,在HTML中是定位的意思,它有四种属性:分别是static是静态的,也是默认的效果,没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。

absolute(绝对定位)

absolute(绝对定位)不光脱离了文本流,而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位,如果有一个工人走了 自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL(TOP、RIGHT、BOTTOM、LEFT简 称TRBL)来设置元素,使之处在任何一个位置。在父层position属性为默认值时,TRBL的坐标原点以body的坐标原点为起始。

  relative(相对定位)只可以在文本流中进行位置的上下左右的移动,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这就好比 一个打工的人他到了外地,但是在老家依然有一个专属于他的位置,这个位置不随他的移动而改变。这样很明显就会空出一块空白来,如果希望文本流抛弃这个部分 就需要用到绝对定位。

  fixed (固定定位)
生成固定定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

  下面我用<三国杀>的实例具体讲一下Position的应用 :

 

  <html>
    <head>
        <title>三国杀</title>
        <style>
              *{padding:0;margin:0;}
              a{text-decoration:none;}
              ul{list-style:none;}
              body{width:800px;margin: 0 auto;background:black;position:relative;}
              #bg{width:800px;height:600px;background-size:800px 600px;background-image:url(image/bgfight01.jpg);position:relative;}                        #card{width:155px;height:175px;position:relative;float:left;margin-left:5px;margin-bottom:5px;}
              #card #c1{width:155px;height:175px;background-size:100%;background-image:url(jiang/jlvbu_1200.jpg);position:absolute;}
              #card #c2{width:155px;height:175px;background-size:100%;background-image:url(image/vaiqu.png);position:absolute;}                        #card #c3{width:155px;height:175px;position:absolute;}    
              #c4{width:24px;height:36px;background-size:100%;background-image:url(image/vwei.png);position:absolute;top:17px;right:1px;}
              #c5{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:60px;right:4px;}
              #c6{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:79px;right:4px;}
              #c7{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:96px;right:4px;}
              #c8{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;top:115px;right:4px;}
              #c9{position:absolute;top:142px;right:12px;color:white;}
             
              .k1{position:absolute;top:449px;left:171px;}
              .k2{position:absolute;top:456px;left:176px;}
              .k3{position:absolute;top:449px;left:218px;}
              .k4{position:absolute;top:456px;left:224px;}
              .k5{position:absolute;top:449px;left:270px;}
              .k6{position:absolute;top:456px;left:275px;}
              .k7{position:absolute;top:449px;left:318px;}
              .k8{position:absolute;top:456px;left:326px;}


              .huatuo{width:174px;height:170px;position:absolute;right:0px;top:434px;}
              .ht{width:152px;height:160px;background-image:url(jiang/jhuatuo_1200.jpg);position:absolute;background-size:100%;right:10px;}
              .yy{width:174px;height:180px;background-image:url(image/vp1qu.png);position:absolute;background-size:174px 180px;bottom:0px;}
              .jn1,.jn2{width:47px;height:51px; background-image:url(image/vjineng.png);background-size:47px 55px;position:absolute;left:18px;top:100px;text-align:center;color:#f00;font-weight:bold;line-height:22px;padding-top:4px;}
              .jn2{left:68px;}
              .x{width:15px;height:13px;background-size:100%;background-image:url(image/vtili.png);position:absolute;left:117px;top:51px;}    
        </style>
    </head>
    <body>
        <div id="bg">
            <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jmenghuo_1200.jpg);">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
                        
                    </div>
                    
                    <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdengai_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>
            
                <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jguanyu_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>

                <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdiaochan_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>

            <div id="card" style="margin-right:0;">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jshensima_1200.jpg);">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>
                    
            <div id="card">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3" style="background-image:url(jiang/jdaqiao_1200.jpg)">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>

            <div id="card" style="float:right">
                    <div id="c1">
                    </div>
                    <div id="c2">
                    </div>
                    <img src="image/vp1cannot.png" id="c3">
                    <ul>
                        <li id="c4">
                        </li>
                        <li id="c5">
                        </li>
                        <li id="c6">
                        </li>
                        <li id="c7">
                        </li>
                        <li id="c8">
                        </li>
                        <li id="c9">4
                        </li>
                    </ul>
            </div>
                
        
            </div>
                        
            
                
        </div>
                <img src="card/kbagua.png" class="k1"/>    
            <img src="image/vheitao.png" class="k2"/>
            <img src="card/knanman.png" class="k3"/>
            <img src="image/vhongtao.png" class="k4"/>
            <img src="card/kdawan.png" class="k5"/>    
            <img src="image/vfangkuai.png" class="k6"/>
            <img src="card/ktaoyuan.png" class="k7"/>    
            <img src="image/vmeihua.png" class="k8"/>
        <div class="huatuo">
            <div class="ht"></div>
            <div class="yy"></div>
            <ul></ul>
            <div class="jn1">急<br />救</div>
            <div class="jn2">青<br />囊</div>
            <div> class="x1"</div>
            <div> class="x2"</div>

        </div>    
    </body>
</html>

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端HTML规范

下一篇:创建元素的方法总结