【CSS3】CSS中的定位

一、css定位

CSS position 属性值：

absolute：生成绝对定位的元素，脱离文档流，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative：生成相对定位的元素，不脱离文档流，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。
static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
inherit：规定应该从父元素继承 position 属性的值。

1.static

HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>定位与浮动</title>
</head>
<body><style>body{width:100%;height:1000px;background-color:#23edfa;}.page1{width:10%;height:10%;background-color:#65c34e;}.page2{width:10%;height:10%;background-color:#FF4500;}.page3{width:10%;height:10%;background-color:#9A32CD;}</style><div class="page1"></div><div class="page2"></div><div class="page3"></div>
</body>
</html>

效果显示：

2.relative

生成相对定位的元素，通过top,bottom,left,right的位置相对于其正常位置进行定位。其中的相对指的是相对于元素在默认流中的位置。

注意：

1.将元素position属性设置为relative之后，再通过top,bottom,left,right属性对其进行相对于原来位置的偏移；

2.元素偏移之后，他本来在默认文档流中占据的位置仍然存在，其紧挨其后的元素的定位依据它本来的位置定位；

3.该元素偏移之后，可能存在覆盖其他元素的情况，可以使用z-index属性显示层级有限级别。

  <style>body{width:100%;height:1000px;background-color:#23edfa;}.page1{width:10%;height:10%;background-color:#65c34e;top:20px;left:20px;position:relative;}.page2{width:10%;height:10%;background-color:#FF4500;}.page3{width:10%;height:10%;background-color:#9A32CD;}

 </style>

显示效果：

注意：如果在.page1中去掉position:relative，top与left作用就失效了

如上图所示，绿色方块的一部分在红色方块上面覆盖，如果想通过代码实现，使红色方块在上方，就要使用z-index属性设置，即在.page1中设置z-index:-1。

显示效果如下图：

3.absolute

生成绝对定位的元素，相对于static定位外的第一个父元素进行定位。

注意：

1.绝对定位的元素已经脱离了文档流，普通流中其他元素的布局就像绝对元素不存在一样；

2.绝对定位的元素的位置是相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，它的位置就相对于body；

3.绝对定位的框可以覆盖页面的其他元素。

利用前端大神张鑫旭的一篇文章为开头，来解读absolute特性（实际上是height: 100%与 height: inherit区别）

盗用大神的解释：

CSS代码：
.outer {display: inline-block;height: 200px; width: 40%;border: 5px solid #cd0000;
}
.height-100 {position: absolute;height: 100%; width: 200px;background-color: #beceeb;
}
.height-inherit {position: absolute;height: inherit; width: 200px;background-color: #beceeb;
}
HTML代码：
<div class="outer"><div class="height-100"></div></div>
<div class="outer"><div class="height-inherit"></div></div>

显示效果：

废话不多说，来看看absolute的奇淫效果：

（1）使用absolute后默认宽度自适应

代码如下：

<html lang="en"><head><meta charset="UTF-8"></head><body>body<style>.div { padding:20px; margin-bottom:10px; background-color:#f0f3f9; }.abs { position:absolute; }</style><div class="div"><p>无absolute</p><img src="1.jpg"></div><div class="div abs"><p>absolute后</p><img src="1.jpg"></div><script type="text/javascript">        </script></body>
</html>

div标签默认宽度是100%显示，第一幅图片显示结果正是如此，但是这时我们看到使用absolute后，则100%默认宽度就会变成自适应内部元素的宽度。

问题：出现塌陷

代码如下：

<html lang="en"><head><meta charset="UTF-8"></head><body>body<style>.div {  padding:20px; margin-bottom:10px; background-color:#f0f3f9; float:left; margin-left:20px}.abs { position:absolute; }</style><div class="div"><p>无absolute</p><img src="1.jpg"></div><div class="div"><p>absolute后</p><img class="abs" src="1.jpg"></div><script type="text/javascript">        </script></body>
</html>

（2）父元素与子元素

<html lang="en"><head><meta charset="UTF-8"></head><body>body<style>body{background: #ADD8E6;padding: 0;margin: 0;width:100%;height:3000px;text-align:center;}.page1{width:100px;height:100px;background-color: #fDD8E6;text-align:center;position:relative;}.page2{width:50px;height:50px;background-color: #ccccc6;text-align:center;top:20%;left:20%;    position:absolute;}.page3{width:100px;height:100px;background-color: #f223E6;text-align:center;top:30px;left:20px;</style><div class="page1">page1    <div class="page2">page2</div>                </div><div class="page3">page3</div></body>
</html>

效果显示：

以上代码，当page2不设置top、left属性值时，absolute对page2的位置不会受到影响

page1位置不变，page2的位置设置为

top:20%; left:20%;

结果是设置absolute与不设置之后的效果一样。

比如，在page1中添加代码：（也就是代码显示的效果）

position:relative;

而当我们去掉以上代码时，显示效果如下：

这时的top与left是以整个容器的宽度为标准(这里的宽高度指的是显示的宽高度)，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素（注意，一定要是直系祖先才算哦~）

注意：relative和static方式在最外层时是以<body>标签为定位原点的，而absoulte方式在无父级是position非static定位时是以<html>作为原点定位（仔细揣摩这句话，在实例中学习，就是以上图展示的效果）

附上代码与图，害怕忘记

<html lang="en"><head><meta charset="UTF-8"></head><body><style>body{background: #ADD8E6;padding: 0;width:400px;height:300px;border:2px solid #e12a23;margin-left:50px;margin-top:50px;}.page0{width:150px;height:150px;border:3px solid #accea1;position:relative;}.page1{width:100px;height:100px;background-color: #fDD8E6;top:20px;left:20px;position:absolute;text-align:rigsht;}.page2{width:50px;height:50px;background-color:#ccccc6;top:20%;left:20%;text-align:center;position:relative;}</style><div class="page0"><div class="page1">    <div class="page2">page2</div>                </div></div></body>
</html>

如下图所示：

如果page0默认为static时，显示效果如下：

（3）关于absolute和relative的三种情况

第一种：附上代码：

<html lang="en"><head><meta charset="UTF-8"></head><body><style>body{background: #ADD8E6;padding: 0;width:400px;height:300px;border:2px solid #e12a23;margin-left:50px;margin-top:50px;}.page1{width:100px;height:100px;background-color: #fDD8E6;position:absolute;text-align:right;}.page2{width:50px;height:50px;background-color:#ccccc6;text-align:center;position:relative;}</style><div class="page1">page1    <div class="page2">page2</div>                </div></body>
</html>

显示效果如下：

第二种情况：仔细看代码的不同之处（定位发生改变）

 .page1{width:100px;height:100px;background-color:#fDD8E6;top:40px;left:40px;position:relative;text-align:right;}
.page2{width:50px;height:50px;background-color:#ccccc6;text-align:center;position:relative;}

显示效果：

第三种情况：

.page1{width:100px;height:100px;background-color: #fDD8E6;top:40px;left:40px;position:relative;text-align:right;
}
.page2{width:50px;height:50px;background-color:#ccccc6;top:20%;left:20%;text-align:center;position:relative;
}

显示结果：

4.fixed

fixed定位，又称为固定定位，它和absoult定位一样，都脱离了文档流，并且能够根据top、right、left、bottom属性进行定位，但不同的是fixed是根据窗口为原点进行偏移定位的，也就是说它不会根据滚动条的滚动而进行偏移

z-index

随后简单说一下z-index元素，z-index 属性设置元素的堆叠顺序

想通过z-index改变图层的显示顺序，引用w3c中的实例，当设置z-index=-1时，鼠标这张图片会至于文字底层

关于层叠顺序还有很大的学问，现在这份经还没有取到，等慢慢跟大神张鑫旭学习后，再来写博客。

每天坚持写技术博客，也是对指示的整理和在学习，希望每天下班后一个小时完成这个任务，现在尽管写的很烂，但是我会不断去学习的

转载于:https://www.cnblogs.com/Horsonce/p/7472918.html

【CSS3】CSS中的定位相关推荐

CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
CSS中固定定位、相对定位、绝对定位以及flex布局高效定位
CSS中固定定位.相对定位.绝对定位以及flex布局高效定位一.固定布局将元素固定到一个位置,不管屏幕怎样移动,元素的位置不移动. <style>body {height: 3000p ...
总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
简要描述CSS 中的定位机制。
CSS中,除了默认的流定位方式以外,还有如下几种定位机制:浮动定位.相对定位.绝对定位和固定定位. 浮动定位是指将元素排除在普通流之外,并且将它放置在包含框的左边或者右边,但是依旧位于包含框之内. 相 ...
关于CSS中关于定位的总结
CSS中定位有四种在不同的场景下有不同的作用下面我就大体的介绍一下这四种定位. static静态定位:应用的场景不多,这里不做介绍下面主要介绍一下其他三种常见的定位 1.position:relat ...
css中四大定位模式
目录一.静态定位:static 二.相对定位:relative 三.绝对定位:absolute 四.固定定位:fixed 五.定位要点--子绝父相在CSS中,通过position属性定义元素的定位 ...
CSS中的定位——position属性
CSS定位指的是改变元素在页面中的位置. CSS定位机制: 普通流:元素按照其在HTML中的位置顺序决定排布的过程(也就是我不对元素进行定位的默认排布) 浮动绝对布局 CSS定位包含的属性有: 属 ...
CSS中有关定位的知识总结
定位:把目标元素放在页面中的任意位置格式: 选择器 { position: 属性值; } 三种定位类型:相对定位绝对定位固定定位相对定位:相对于其原文档流的位置进行定位 position:re ...

【CSS3】CSS中的定位

CSS position 属性值：

【CSS3】CSS中的定位相关推荐

最新文章

热门文章