css 定位

淡淡的烟草味﹌ 2022-11-21 06:55 273阅读 0赞
一、position








































值 说明 是否使其脱离文本流
static 默认值，元素按文本流定位，忽略 top, bottom, left, right, z-index。 否
absolute 从父级向上查找第一个非 position: static 的元素，相对其进行绝对定位 是
relative 元素相对其原位置（默认文本流的位置）进行定位 否
fixed 相对浏览器窗口定位 是
sticky 与left/right/top/bottom配合使用，粘性布局 否
inherit 从父元素继承 -
二、float






























值 说明 是否使其脱离文本流
none 元素不浮动，在其文本流位置 否
left 向左浮动 是
right 向右浮动 是
inherit 继承父元素 -

补充： 如果浮动元素非可替换元素，需要指定宽度，否则他会尽可能地窄

三、positon 与 float 共用时可能存在的问题

  1. 若 position 与 float 的设置都会使得元素脱离文本流，那么 float 属性将会失效; 否则 position 与 float 将会叠加生效。

    1. /* eg1：float失效 */
    2. display: block;
    3. positon: fixed;
    4. left: 100px;
    5. float: right;    /* 失效 */
    6. /* 元素相对浏览器左上角向右偏移100px开始显示 */
    8. /* eg2：叠加生效 */
    9. display: block;
    10. position: relative;
    11. left: -100px;
    12. float: right;
    13. /* 元素浮动到右边界，并且与右边界相距100px */

发表评论

表情：
评论列表 （有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS定位

    定位的分类 1.静态定位(static) 一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。 2.绝对定位(absoulte) 一般与祖

    忘是亡心i忘是亡心i/ 0 赞/ 290 阅读

    相关 css_定位

    1) CSS定位的概念 CSS 定位 (Positioning) 属性允许你对元素进行定位。 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素

    短命女短命女/ 0 赞/ 333 阅读