css定位属性

时间：2020-02-22 15:40:40 阅读：1607 评论：0 收藏：0 [点我收藏+]

标签：重要 pre text ack uri 情况 back auto style

_{^{定位（position）}}

定位是CSS里很重要的一个属性，作用：检索或者设置元素的定位方式（改变元素位置的属性）

其中有很多的属性值也有很多今天就先讲五种定位：

1.  static    静态定位:
static 静态定位是position的默认值,默认文本流的状态，不会识别left right top bottom值指定的坐标。
 
2.  absolute  绝对定位：
a : 参照物：按照已经有定位的父元素进行位置的变化。
b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。
c : 绝对定位，脱离文档流、不占据空间。
d : 可以识别left right top bottom值指定的坐标。
 
3.  relative  相对定位：
a : 参照物：自身默认的位置。
b : 始终占据空间，不会破坏文档流。
c : 可以识别left right top bottom值指定的坐标。
 
4. fixed 固定定位：
a : 参照物：浏览器窗口。
b : 脱离整个文本流。不占据空间。
c : 可以识别left right top bottom值指定的坐标。
 
5. sticky 粘性定位：
position:relative  和 position:fixed的结合。
如果页面没超出窗口范围，按照relative 执行，
如果内容超出窗口位置，按照fixed执行。
可以识别left right top bottom值指定的坐标。
 
定位元素:后定位的元素会把前面定位的盖住。
        z-index:
            控制定位元素的层次关系
            属性值为一个数字（可以为负数），数字越大，层次关系越高
            默认值 auto;
在页面的搭建中经常用到包含块的设置：       1：如果父元素为参照物：添加 position:relative;
       2: 给要做定位的子元素：添加 position:absolute;
 
运用定位可以很方便的让元素到想要到的地方。
居中的方法：
    让内容在浏览器窗口左右上下居中。
        第一种方法:
            position:fixed;
            left:50%;
            top:50%;
            margin:-高度的一半 0 0 -宽度的一半。
 
        第二种方法：
            position:fixed;
            left:0;right:0;
            top:0;bottom:0;
            margin:auto;

    利用定位:让子元素在父元素里面左右上下居中
         /* 左右上下的居中 */
        position:absolute;
        left:0;right:0;
        top:0;bottom:0;
        margin:auto;
 
需要用到定位的地方有很多，这也是一个很灵活的属性，要非常透彻的知道其中的属性才能灵活运用噢。
XP 2020-02-22 15:00:00


 
 
 
 
 
 

css定位属性

标签：重要 pre text ack uri 情况 back auto style

原文地址：https://www.cnblogs.com/xpsss/p/12345441.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行