带你走进CSS定位详解

Posted dashucoding

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带你走进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定位详解,多试试,熟能生巧嘛~

技术分享图片

以上是关于带你走进CSS定位详解的主要内容,如果未能解决你的问题,请参考以下文章

基于234树手撕TreeMap红黑树源码(3万字长文带你走进红黑深处的细节)

CSS代码片段

CSS代码片段

故事:一文带你走进JVM的世界(图文并茂)

css常用代码片段 (更新中)

带你轻松解密白盒测试(Demo详解)