一、position的概念

作为布局必不可缺少的元素之一,深究其属性以及一些注意点是非常必要的。

定义:规定元素的定位类型。

position属性:

属性 描述 常用性
absolute 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。 ★★
relative 生成相对定位的元素,相对于其在文档流正常位置进行定位。 ★★
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 ★☆
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明) ☆☆

从表格中可以了解到position的主要概念,有几点需要注意:

二、position属性的一些注意点

1. absolute的定位问题

absolute所定位的位置是最近带有position属性并且属性值不为static的父级元素。子元素默认定位在父元素的左上角位置。

如果子元素仅仅设置了position:absolute,而未设置left、top之类的元素。和对应的padding无关。

举个例子:如果子元素设置了bottom:0;如果父元素存在padding:20px;那么padding-bottom:20px;会失效,但是padding-left:20px;依然奏效。比如:

//css
div{
width:200px;
height:200px;
}
.fatherDiv{
background-color:#12B7F5;
position:relative;
padding:20px;
margin-top:20px;
}
.childDiv{
width:100px;
height:100px;
background-color:#F9b041;
position:absolute;
bottom:0px;
} //html
<div class="fatherDiv">
<div class="childDiv"></div>
</div>

当然如果你既设置了left、又设置了bottom.那么父元素的padding的任何设置是对子元素产生不了任何影响

这里需要注意,margin无论什么值都也都会影响到子元素,因为它是直接影响父级。

2. relative的定位问题

以下例子都以下面为基础样式

//css
div{
width:200px;
height:200px;
}
.brotherDiv{
background-color:#12B7F5;
}
.brotherDiv1{
background-color:#F9b041;
} //html
<div class="brotherDiv"></div>
<div class="brotherDiv1"></div>

i. 两个div为块级(block)元素

两者的left、top....都不会相互影响.因为即使元素位置改变了,但是它在文档流占用的空间不变,所以并不会影响到布局。

.brotherDiv{
position:relative;
top:40px;
}
.brotherDiv1{
position: relative;
}

另外还可以通过z-index设置显示的层次。例如给brotherDiv设置z-index:1,则蓝色块会覆盖黄色(z-index默认为0)

ii. 两个div为行内-块级(inline-block)元素

除了同样拥有第一个特性以外,还多了一个特有的特性:

margin和padding都会影响到同行元素

.brotherDiv{
position:relative;
display: inline-block;
margin-top:40px;
}
.brotherDiv1{
background-color:#F9b041;
position:relative;
display: inline-block;
}

我们看一下两个div的style面板



发现brotherDiv1并不存在margin.

我们用JS获取一下两个margin:

window.onload = function(){
var div = document.querySelector('.brotherDiv');
var div1 = document.querySelector('.brotherDiv1'); console.log(div.offsetTop); //40
console.log(div1.offsetTop); //40
}

用js的话是可以获取两者的偏移量的,也就是说brotherDiv1实际上也偏移了。

而用padding的情况就比较常见.两个元素默认会底部对齐。并且高度低的元素会获得偏移量

//css
.brotherDiv{
background-color:#12B7F5;
position:relative;
display: inline-block;
padding:20px;
}
.brotherDiv1{
background-color:#F9b041;
display: inline-block;
position:relative;
} //html
<div class="brotherDiv"></div>
<div class="brotherDiv1"></div> //js
window.onload = function(){
var div = document.querySelector('.brotherDiv');
var div1 = document.querySelector('.brotherDiv1'); console.log(div.offsetTop); //0
console.log(div1.offsetTop); //40
}

当然,对齐的方法相信大家都非常熟悉了。

在高低较低的元素设置css

//把元素的顶端与行中最高元素的顶端对齐
vertical: top; //把此元素放置在父元素的中部
vertical: middle; // 把元素的顶端与行中最低的元素的顶端对齐
vertical: bottom;

注意,这里的middle并非是相对行内元素居中的意思。

感兴趣的可以看看这篇文章:《HTML元素垂直居中的n种方法》

深究CSS中Position的属性和特性的更多相关文章

  1. CSS中"position:relative"属性与文档流的关系

    前言 近期遇到一个问题--"position:relative"到底会不会导致元素脱离文档流?主流观点是不会,但都给不出一个有说服力的论据.最后我自己佐证了一番,总算有了个结果:& ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  4. css中的定位属性position(转)

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  5. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  6. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  7. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  8. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

  9. CSS中的display属性(none,block,inline,inline-block,inherit)

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

随机推荐

  1. spring 事物的一些理解

    推荐一个我认为Spring事物写得很好的文章. 文章链接:http://www.codeceo.com/article/spring-transactions.html  文章作者:码农网 – 吴极心 ...

  2. [C#基础]说说lock到底锁谁?(补充与修改)

    摘要 今天在园子里面有园友反馈关于[C#基础]说说lock到底锁谁?文章中lock(this)的问题.后来针对文章中的例子,仔细想了一下,确实不准确,才有了这篇文章的补充,已经对文章中的demo进行修 ...

  3. Linux 用户管理【UID和GID】

    Linux 用户和用户组管理 Linux系统是一个多用户多任务的分时操作系统,任何一个要使用系统资源的用户,都必须首先向系统管理员申请一个账号,然后以这个账号的身份进入系统. 用户的账号一方面可以帮助 ...

  4. C/C++编译、链接、运行的基础知识

    0.C/C++从源文件在编译器的作用下先编译成.s的汇编,然后在汇编器的作用下变成.o的可重定向目标文件,然后在链接器的作用下变成可执行文件 1.在项目中设置的编译寻找目录中的.h文件(一般就是inc ...

  5. Java精选面试题之Spring Boot 三十三问

    Spring Boot Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一名 Spring Boot 的专家. 问题一: Spring Boot.Spring MVC 和 ...

  6. JDK 的配置和反编译工具的使用---------------Java知识点

    初始Java 1995年5月,sun公司开发了一门新的编程语言------Java 詹姆斯.高斯林(Java之父),Java语言小巧安全具有可移植可跨平台性的优点. 开发java程序的步骤:编写 ,编 ...

  7. 深入理解Word2Vec

    Word2Vec Tutorial - The Skip-Gram Model,Skip-Gram模型的实现原理:http://mccormickml.com/2016/04/19/word2vec- ...

  8. php 把秒数转换为时长(h:i:s格式)

    /** * 把秒数转换为时分秒的格式 * @param Int $times 时间,单位 秒 * @return String */ function secToTime($times){ $resu ...

  9. springboot 项目pom.xml文件基本配置

    <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...

  10. java的MVC与C#

    Views: @{ Layout = "~/Views/Shared/_Layout.cshtml"; } @{ ViewBag.Title = "Index" ...