13 CSS 的position属性

就像photoshop中的图层功能会把一整张图片分层一个个图层一样,网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的,然后通过定位属性position对元素进行定位摆放,最终实现网页的布局。

定位属性position有4个值,分别是静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。默认就是static。所以我们略过。

元素设置了定位以后,还要依靠4个方位属性来进行定位摆放。

方位属性:

/*
top:让元素相对于指定目标的顶部偏移指定的距离。
例如: top:10px; 表示距离顶部10像素 right:让元素相对于指定目标的右边偏移指定的距离。
例如: right:10px; 表示距离顶部10像素 bottom:让元素相对于指定目标的底部偏移指定的距离。
例如: bottom:10px; 表示距离顶部10像素 left:让元素相对于指定目标的左边偏移指定的距离。
例如: left:10px; 表示距离顶部10像素
*/
  • 相对定位(relative)

相对定位就是在正常文档流中,元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。

.c1{
width: 200px;
height: 200px;
background-color: indianred; } .c2{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
left: 200px;
top: 200px; } .c3{
width: 200px;
height: 200px;
background-color: lightblue; }
  • 绝对定位(absolute)

绝对定位就是将元素脱离文档流,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位,如果不存在这样的父级元素,则默认是相对于body元素进行绝对定位。

轮播图案例:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style> *{
margin: 0;
padding: 0;
} .lunbo{
width: 590px;
height: 470px;
border: 1px solid rebeccapurple;
margin: 100px auto;
position: relative;
} .lunbo ul{
list-style: none;
} .lunbo .img li{
position: absolute;
top: 0;
left: 0;
} .lunbo .btn li{ font-size: 25px;
width: 40px;
height: 40px;
background-color: gray;
text-align: center;
line-height: 40px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
color: white; position: absolute;
top: 50%;
margin-top: -20px; } .lunbo .left_btn{
left: 0;
} .lunbo .right_btn{
right: 0;
}
</style>
</head>
<body> <div class="lunbo">
<ul class="img">
<li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
<li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
</ul>
<ul class="btn">
<li class="left_btn"> < </li>
<li class="right_btn"> > </li>
</ul>
</div>
</body>
</html>
  • 固定定位(fixed)

    固定定位与绝对定位有点相似,但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位,而不再相对于某个HTML页面元素了,所以当元素使用了固定定位以后,就算页面的滚动条滚动了,固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位,不受文档流的影响了。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="utf8">
<style> body{
margin: 0;
} .c1{
width: 100%;
height: 2000px;
background-color: lightgray;
} .c2{
width: 200px;
height: 60px;
background-color: yellowgreen;
text-align: center;
line-height: 60px;
position: fixed;
right: 20px;
bottom: 20px;
} </style>
</head>
<body> <div class="c1"></div>
<div class="c2">返回顶部</div> </body>
</html>

13 CSS 的position属性的更多相关文章

  1. 深入理解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 ...

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

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

  3. CSS中Position属性

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

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

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

  5. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  6. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  7. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. 理解css之position属性

    之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...

  9. CSS中position属性 (absolute,relative,static,fixed)

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

  10. css 中 position属性

    position属性详解 文档流 1.html中的布局方式分为三种: 标准流(顺序布局):因为html中的元素大体可以分为两大类(a:块级元素:div .H1-H6. table表格  有序级无序列表 ...

随机推荐

  1. 解决 Order By 将字符串类型的数字 或 字符串中含数字 按数字排序问题

    oracle数据库,字段是varchar2类型即string,而其实存的是数字,这时候不加处理的order by的排序结果,肯定有问题解决办法:              (1)cast( 要排序的字 ...

  2. collection.abc模块下的抽象基类UML类图说明

    说明 Iterable.Container和Sized 每个容器都应该继承这三个抽象基类,或者实现兼容的协议.Iterable通过__iter__方法支持迭代, Container通过__contai ...

  3. 本地配置静态ip和dns及虚拟机

  4. 解析Spring中的循环依赖问题:初探三级缓存

    什么是循环依赖? 这个情况很简单,即A对象依赖B对象,同时B对象也依赖A对象,让我们来简单看一下. // A依赖了B class A{ public B b; } // B依赖了A class B{ ...

  5. 【LeetCode贪心#08】根据身高重建队列(还是涉及处理两个维度的信息)

    根据身高重建队列 力扣题目链接(opens new window) 假设有打乱顺序的一群人站成一个队列,数组 people 表示队列中一些人的属性(不一定按顺序).每个 people[i] = [hi ...

  6. C C++指针面试题零碎整理

    最基础的指针如下: int a; int* p = &a; 答:p指向a的地址,&是取a的地址.*指的是指针中取内容的符号. 2.str[]和str*的区别: char str1[] ...

  7. JavaScript之原生ajax && jQuery之ajax

        ajax提供了异步访问服务器的方法,使页面无须刷新就可以更改页面内容,在实际情况中使用原生的情况较少但是原理需要掌握,一般都是使用jquey更轻量级的实现ajax但是原理是共同的.     原 ...

  8. go grpc流式和非流式的例子

    参考grpc官方:  https://grpc.io/docs/quickstart/go.html 或官方中文翻译: http://doc.oschina.net/grpc?t=60133 安装pr ...

  9. RocketMQ(3) 根据消息key查询功能的实现: indexFile

    三: indexFile 除了通过通常的指定Topic进行消息消费外,RocketMQ还提供了根据key进行消息查询的功能. 该查询是通过store目录中的index子目录中的indexFile进行索 ...

  10. 10、zookeeper的leader选举

    leader选举 服务器状态 looking:寻找leader状态.当服务器处于该状态时,它会认为当前集群中没有leader,因此需要进入leader选举状态 following:跟随着状态.表明当前 ...