position 定位

最新推荐文章于 2025-01-01 17:18:28 发布

转载最新推荐文章于 2025-01-01 17:18:28 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ningjie/p/9589417.html

三种布局方式

标准流(顺序)

　　　　1块级元素 h div table ol ul li p 独占一行

　　　2内联元素 a mig span input 排列除非宽度不够

　　　　{ width:100px;height:100;background: red;

border:1px solid #fff } // 结果是3个竖的块

　　　　 span span span 横排

这俩个就是传统布局

2 position

　　　　　 position通过top right bottom left 实现定位

　　　　 static 默认 top right bottom left

　　　　 relative 相对top right bottom left

　　　　　　absolute绝对top right bottom left

代码:

div{width:100px; height100px; background:red;

position:relative; left:0px;top:0px}

div2{width:100px; height100px; background:blue;

　　　　　　 position:relative;　left:0px;top:-50px}

// 第一点 : div2 blue覆盖在了 div1 red 上

// 第二点 : 当position :relative 为left 100px top100px时,是相对于网页左上角向左和向下移动; 当为right:50px bottom:50px,相对于最左上角向右和,从下往上移动, 结果为这个图形不完整了. 重点是 relative是相对于网页的左顶点为起点.

position :absolute

　　　　　　div{width:100px; height100px; background:red;

　　 position:relative; left:100px;top:100px} // 结果为窗口的向左边在向下

　　 div2{width:100px; height100px; background:blue;

　　　　　　　　 position:relative;　right:100px;bottom:100px} // 结果为窗口的右下在向上.

body{ height :300px} // bottom:设置为 0 也是相对于当前窗口的,如果为bottom:-500px ,或top:1500px,则会下移动

absolute 与relative的区别是一个是相对于窗口的四个点, 一个是相对与只窗口的左上点.

如果绝对属性的父元素设置了,margin-left 和 margin-top,但子绝对定位不会有变化,因为父元素不具备定位属性

fixed

position fixed 相对于屏幕的四个角,不受父元素的定位限制.

　　inherit

主要作用是继承父元素的定位, 作用效果一样, 相当于自己添加了.

　　.w{
　　　　　　    width: 100px;
  　　　　　　　  height: 100px;
   　　　　　　　  background :red;}
　　　　.q{width: 100px;
　　　　    height: 100px;
  　　　　  background :blue;
　　　　　　 position:relative;
　　　　　  top: -50px;}// .q会覆盖.w ,后面的元素依然有层的关系.
z-index 是表示层级关系的
      上图代码 .w 添加z-index:1;则 .w覆盖.q  ,前提是.w也必须定位(position:relative)否则无效.

浮动

定位

*{
    margin:0;
    /*padding:0;*/
}// 经过测试 padding设置为0无效果, 直接用margin就可以, padding是设置框里的填充

转载于:https://www.cnblogs.com/ningjie/p/9589417.html