zoukankan      html  css  js  c++  java
  • 带你走进CSS定位详解

    标题图

    学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案。

    一:定位

    定位属性列表

    • position
    • top
    • bottom
    • right
    • left
    • z-index

    position

    基本语法:

    position:static | absolute | fixed | relative

    语法介绍:

    1. static:默认值,无特殊定位。
    2. absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,right,top,bottom。
    3. fixed:生成绝对定位的元素。
    4. relative:生成相对定位的元素,可通过left,right,top,bottom属性设置相对于自身偏移位置。

    代码:

    div { position:relative; top:-4px } 

    bottom

    基本特殊:定位元素

    基本语法:bottom:auto | length

    语法

    1. auto:默认值,无特殊定位。
    2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

    代码:

    div { position:relative; bottom:6px; }   

    z-index

    语法:z-index:auto | number
    取值:auto:默认值,number:无单位的整数值,可负数。

    代码:

    div { position:absolute; z-index:5; width:6px; } 

    left

    基本语法:left:auto | length

    1. auto:默认值,无特殊定位。
    2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

    代码:

    div { position:relative; top:-3px; left:6px; }   

    top

    基本语法:top:auto | length

    1. auto:默认值,无特殊定位。
    2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

    代码:

    div { position:relative; top:-3px; left:5px;}

    基本语法:right:auto | length

    1. auto:默认值,无特殊定位。
    2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

    代码:

    div { position:relative; top:-3px; right:6px}

    相对定位

    relative生成相对定位的元素,相对于其它位置进行定位。

    代码:

    <style type="text/css">
            #box1 {
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: blue;
            }
            #box2 {
                margin: 10px;
                width: 100px;
                height:100px;
                background-color: red;
                /*position: relative;
                left: 100px;
                top: 100px;*/
            }
        </style>
    
    <div id="box1"></div>
    <div id="box2"></div>

    绝对定位

    绝对定位相对于它的参照物移动位置,如果没有,默认为body为参照物。

    结语

    • 带你走进CSS定位详解,多试试,熟能生巧嘛~

    送❤

  • 相关阅读:
    JAVA-初步认识-第十三章-验证静态同步函数的锁
    JAVA-初步认识-第十三章-多线程(验证同步函数的锁)
    JAVA-初步认识-第十二章-面向对象(包与包之间的访问)
    JAVA-初步认识-第十二章-面向对象(包的概述)
    JAVA-初步认识-第十三章-同步函数
    Fatal error: Call to undefined function imagettftext()解决办法
    ecstore菜鸟电子面单对接摘要
    linux crontab 实现每秒执行(转)
    ios9 URL Schemes列为白名单,才可正常检查其他应用是否安装
    主机宝等主机面板不能跨站访问文件,不能访问父路径文件问题
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11932560.html
Copyright © 2011-2022 走看看