zoukankan      html  css  js  c++  java
  • CSS_position

    1、

    HTML Code

        <div id="example">
                        <div id="div-before">
                            <p>id = div-before</p>
                        </div>
                        <div id="div-1">
                            <div id="div-1-padding">
                                <p>id = div-1</p>
                                <div id="div-1a">
                                    <p>id = div-1a</p>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ult                                   rices viverra velit.</p>
                                </div>
                                <div id="div-1b">
                                    <p>id = div-1b</p>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ult                                   rices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.</p>
                                </div>
                                <div id="div-1c">
                                    <p>id = div-1c</p>
                                </div>
                            </div>
                        </div>
                        <div id="div-after">
                            <p>id = div-after</p>
                        </div>
                    </div>

     CSS Code:

        #example {
                        float: right;
                    }
    
                    #example p {
                        margin: 0 0.25em;
                        padding: 0.25em 0;
                    }
                    #div-before,
                    #div-after {
                        background-color: #88d;
                        color: #000;
                    }
    
                    #div-1 {
                         400px;
                        background-color: #000;
                        color: #fff;
                    }
    
                    #div-1-padding {
                        padding: 10px;
                    }
    
                    #div-1a {
                        background-color: #d33;
                        color: #fff;
                    }
    
                    #div-1b {
                        background-color: #3d3;
                        color: #fff;
                    }
    
                    #div-1c {
                        background-color: #33d;
                        color: #fff;
                    }

     3、DOM图:

    4、

    position: static

    在CSS中所有元素的“position”属性的默认值都是“static”,因为不需要显式的为每个元素设置“position:static”。

    两个页面,同时存在“div#div-1”,那么此时你在A面中需要对“div#div-1”进行绝对定位;而在B页面中“div#div-1”又不需要进行绝对定位。

    相对定位position:relative

    relative称为相对定位,如果你给某个元素指定了postion的值为“relative”,那么你就可以通过“T-R-B-L”(也就是top,right,bottom,left)来设置元素的定位值。
    使用relative时有几点需要注意:
    • 元素设置了relative时,是相对于元素本身位置进行定位;
    • 元素设置了relative后,可以通过“T-R-B-L”改变元素当前所在的位置,但元素移位后,同样点有当初的物理空间位;
    • 元素设置了relative后,如果没有进行任何的“T-R-B-L”设置,元素不会进行任何位置改变。

    绝对定位position:absolute

    absoluteposition中的第三个属性值,如果你给元素指定了absolute,整个元素就会漂出文档流,而且元素自身的物理空间也同时消失了。不像“relative”还具有原先的物理空间。

    relative和absolute的结合

    元素相对定位“relative”是相对于元素自身定位,而在第三步中大家知道元素绝对定位“absolute”是相对于html。但这种说法只有满足这样的条件才是正常的:“绝对定位元素的任何祖先元素没有进行任何的“relative”或者“absolute”设置,那么绝对定位的元素的参考物就是html”,这样来,“relative”和“absolute”的结合就能起到很大的作用。
    如果一个元素绝对定位后,其参照物是以离自身最近元素是否设置了相对定位,如果有设置将以离自己最近元素定位,如果没有将往其祖先元素寻找相对定位元素,一直找到html为止。
     
  • 相关阅读:
    第六课样式表
    jsp传递参数的四种方法
    Data truncated for column 'Sex' at row 1
    写方法时try,catch 的好处
    访问报错The origin server did not find a current representation for the target resou
    tomcat启动报错Failed to start component [StandardEngine[Catalina].StandardHost[localhost].
    Win10鼠标右键如何添加快捷关机、注销等功能?
    idea tomcat部署
    html如何将图片盖住整个网页
    如果要在标签中显示"<"或者">"等特殊字符,可以使用“&”开头,“;”结尾,中间加上字符对应的编码就可以啦。
  • 原文地址:https://www.cnblogs.com/caroline4lc/p/3888053.html
Copyright © 2011-2022 走看看