zoukankan      html  css  js  c++  java
  • relative 和 absolute 定位关系

    问题:

      relative 和 absolute 之间的关系是什么?有什么区别?

    那,答案呢?

      relative  相对定位, 以自己没有设置relative 属性之前的位置来定位,占用没有设置relative 属性前的位置与空间,其中背景图和图片其他内容显示在页面最上层,占用自己原本位置空间,不挤占其他html快的空间

      absolute  绝对定位,一直往上级找relative属性,不找同级,找到含有relative的标签进行定位,没找到相对body定位,释放原本占用的位置空间,从侧面看,相当于把这块有absolute 属性的内容从html平面中抽出来放在html平面的上面

      两者都有left 和 top属性, 只是两者的参照原点不同,但是坐标原点都在左上角

      一般这两个联合使用,相对定位不改变位置并固定的内容大小,不随屏幕的更改而改变,让absolute定位其中,或者单独absolute定位全窗口导航信息,比如返回顶面,QQ 电话等联系方式链接

    那,既然清楚了这两个定位概念,实现一个绝对放屏幕居中?

      1. 定义一个容器包裹这快内容

      2. 使用absolute,相对body进行定位, 宽高占用50%

      3. 通过 transform 属性把定位坐标移到屏幕中央

    .box-break {
         1600px ;
        background-color: orange;
        padding: 50px;
        margin: 0;
        border: solid 2px red;
        /*position 绝对定位,一直往上级找relative属性,不找同级,找到相对relative定位,没找到相对body定位,并且还有个属性,并不占用html本来空间*/
        position: absolute;
        left: 50%;
        top: 50%;
        /*通过transform把屏幕上坐标点移到屏幕中心*/
        transform: translate(-50%, -50%);
    }
    
    body {
        /*让其body内容定窗口显示*/
        margin: 0;
        padding: 0;
        background: url("../img/girl.jpg");
        background-size: 100%;
    }
    

      

  • 相关阅读:
    1.1 js 预解释(变量的提升,浏览器的加载机制)
    js 原型链详解
    ES6模块 与 CommonJS的差异
    export,import,export default,import()区别
    css权重优先级
    CSS3如何实现0.5边框
    JS 时间戳转换成具体时间
    http协议(二)请求和响应报文的构成
    http协议(一)一些基础知识
    mac homebrew  常用命令
  • 原文地址:https://www.cnblogs.com/2bjiujiu/p/7482931.html
Copyright © 2011-2022 走看看