zoukankan      html  css  js  c++  java
  • 510,position的值,relative和absolute定位原点是

    (absolute:生成绝对定位的元素)

    position属性用来规定元素的定位类型和方式

    ①position:static 默认值,没有定位,元素出现在正常的流中;

    ②position:fixed  固定定位 是相对于浏览器窗口来进行定位;

    ③position:relative 相对定位  相对于其本身正常位置来进行定位,它原本所占的空间仍保留;

    ④position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body),此时元素原先在正常文档流中所占的空间会关闭,就像元素原来不存在一样,绝对定位后会生成一个块级框,而不管它原先在正常流中是何种类型。

    选好定位方式后可通过设置 top/right/bottom/left 来设置元素位置,但是对static无用,static定位下是靠margin来移动位置。

    注意:当元素设置position:absolute后,再想用 margin:0px auto; 来使元素水平居中是无效的,可进行如下设置:

    <style>

    .s1{100%;height:100%;position:relative;}
    .s2{background:yellow;300px;height:100px;position:absolute;
            left:50%;margin-left:-150px;//是让元素到其相对定位的父元素左边
    的距离为该父元素宽度的50%,这时左边边界正好在父元素的中间线上,再左移宽度的一
    半正好居中,即再设置margin-top
    :-150px可使其水平居中 top:50%;margin-top:-50px;//与上述原理相同,设置后可垂直居中}

    </style>
    <body>
    <div class="s1">
    <div class="s2">
        水平居中
    </div>
    </div>
    </body>
    一日之计在于晨
  • 相关阅读:
    ARM的反汇编工具
    Windows上使用Objectivec和Cocoa
    linux 统计代码行数
    oracle数据库基本操作
    thinkphp 带检索参数分页
    Object 转为List
    MvvM datagrid多行选中绑定
    mvvm Dev12.1 GridControl 导出
    ASP.NET MVC入门,好文共享
    [职场、征人、面试](呛)你到底要不要换工作? Part (II) 诚实,最难堪的状态,却最有价值的对策
  • 原文地址:https://www.cnblogs.com/1998Archer/p/12364650.html
Copyright © 2011-2022 走看看