zoukankan      html  css  js  c++  java
  • CSS入门(定位的简单总结)

    一、定位

    普通流定位
    浮动定位
    相对定位
    绝对定位
    固定定位

    二、position定位

    1.static(默认值)
    2.relative 相对定位
    3.absolute 绝对定位
    4.fixed 固定定位

    图层概念:
    z-index:调整元素的图层
    注意 :只有使用在 相对定位 绝对定位 固定定位上 浮动并不能使用
    只能用在同级的标签上 不能用在父级和层级关系的标签中 子级永远是覆盖父级的

    ①、相对定位


    偏移属性 改变元素在页面上的位置(移动元素)
    top
    left
    right
    bottom


    相对定位: 元素会相对原来的位置偏移到某个地方,原本的位置依然会保留 相对元素原来位置的左上角进行位置偏移的
    使用场合: 元素位置的微调


    ②、绝对定位


    绝对定位的元素会脱离文档流 相对于body进行位置偏移
    注意:一旦我们给元素设置了绝对定位之后就具有的漂浮的效果


    ③、固定定位


    固定定位: 一旦写上了固定定位之后,元素就具有漂浮的效果并脱离文档流 不受我们滚动条的影响
    跟随body标签的左上角进行位置偏移的


    ④、绝对定位和相对定位的结合使用


    1.在要偏移的元素的父级元素里面添加 相对定位
    2.在该元素里添加绝对定位


    各种定位的使用场合
    多个块级元素现在要在一行内显示 用浮动
    元素要实现自身位置的微调的时候 用相对定位
    实现弹出内容时(或者排版) 用绝对定位和相对定位的结合使用
    顶部固定 左边导航固定 广告 固定定位

  • 相关阅读:
    设计模式
    设计模式
    设计模式
    JS | Reduce
    JS | 数组的深拷贝与浅拷贝
    JS | 数组操作
    Lodash | 指定路径对Object操作
    Git | 场景总结
    ES6 Class
    SpringBoot | Jpa @Id @GeneratedValue
  • 原文地址:https://www.cnblogs.com/MDZZZ/p/12049752.html
Copyright © 2011-2022 走看看