HTML+CSS--position大法好
其实在HTML和CSS的学习中,css的position属性应该是难点之一,难在你需要静下心来仔细搞清楚它的每一个值的意义、效果和用法。但是它的功能很强大,效果也是很令人惊艳的,因为你可以用它去实现一些float很难去实现的定位效果,比如下图:
等等,今天我们就以第一个图的样式为例,讲讲position的用法。
首先定义一个div,然后在里面插入底层图片
<div class="Service_pic">
<img src=".../流程图.png" class="center-block Service_pic_img">
</div>
(其中center-block是Bootstrap自带的居中类)
CSS定义:
.Service_pic{
margin-top: 100px;
position: relative;
}
.Service_pic_img{
width: 30%;
}
Service_pic类的margin-top设置只是为了让它与顶部有一定的距离,这样比较美观。Service_pic_img的宽度定义则是为了让图片宽度变成总div宽度的30%,height则随着图片宽度大小按比例缩放。这里的Service_pic还设置了position属性,其属性值为relative。
那么这里我们要说明一下,position属性的默认值是static,就是说当你没有定义position属性的值的时候,元素的position值就是static。
官方解释static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。也就是说你不能给position:static的元素定义top, bottom, left, right 或者 z-index 属性,它们是无效的。
官方解释relative:
生成相对定位的元素,相对于其正常位置进行定位。
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
也就是说当你不给position:relative定义top, bottom, left, right值的时候,它跟原来的位置是没有任何区别的。
那么我们这里是给外面的div定义了一个position:relative的值的,但是却没有给出其 top, bottom, left, right 或者 z-index 属性定义,这是为什么呢?后面你就知道了哈哈
这里要注意的一点是relative是不脱离文档流的,也就是说无论你把它移动到哪里,它原有的位置还是会留着的。
生成效果如下图:
然后当然就是把图片文字啥的加进去,代码如下:
<div class="Service_pic">
<img src=".../流程图.png" class="center-block Service_pic_img">
<div class="step1">
<h3 class="step1_num">0 1</h3>
<h3 class = "step1_header">需求分析</h3>
<img src=".../01需求分析.png" class="step1_img">
</div>
</div>
效果如下图:
最后当然是来调整最后的样式啦,代码如下:
.step1{
font-family: DIN Condensed;
color: #494949;
}
.step1_num{
position: absolute;
top:-0.1%;
left: 60.4%;
color: white;
font-size: 4rem;
}
.step1_header{
position: absolute;
top:0.2%;
left: 68%;
font-size: 2.5rem;
}
.step1_img{
position: absolute;
top:-4%;
left: 21.6%;
width: 19%;
}
其中step1类是最外层的div,定义字体的样式和颜色。
step1_num 类定义的是数字的位置与样式,字体大小和颜色这些我们就先不说了,我们来说说position: absolute。
官方解释 absolute:
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
通过上文我们知道,position的默认值是static,那么也就是说,absolute只会根据非static的第一个父元素进行定位。举例则为,h3 .step1_num采用了position: absolute,而它的父元素div .step1是采用position默认值static的,所以h3 .step1_num并不会相对div .step1进行定位。所以h3 .step1_num会继续向他的上一级父元素查找,直到找到div .Service_pic这个采用position: relative;定位的父元素以后,h3 .step1_num才会根据他定位。否则它就一直查找上去,如果最终还是没找到position不为static的元素,就以浏览器窗口为基准定位。再贴一下代码你们自己琢磨一下:
<div class="Service_pic">
<img src=".../流程图.png" class="center-block Service_pic_img">
<div class="step1">
<h3 class="step1_num">0 1</h3>
<h3 class = "step1_header">需求分析</h3>
<img src=".../01需求分析.png" class="step1_img">
</div>
</div>
所以一开始我们把最外层的div .Service_pic设置成position: relative;是因为我们想让其中的内容(div .step1)根据这个div .Service_pic的位置进行定位而不是最外层的浏览器窗口,这样子当窗口和图片都缩放的时候才不会产生错位。
div .Service_pic采用position: relative;的原因是 relative相对于其正常位置进行定位,而我们并不需要div .Service_pic有任何位移,只需要它呆在原来的地方,为它的子元素提供一个定位的基准。
那你可能会问干嘛那么麻烦,直接把div .step1设置成position: relative;不就好了嘛。但是你别忘了position: relative;是不脱离文本流的,下面几个白大洞这样好看?
对这里还要说position: absolute是脱离文本流的,也就是正常文本中并不会为它保留位置,有点像float但又比float好控制。
然后效果如下图:
(位置和大小只能自己慢慢调整一下咯)
这个页面的后几步内容与方法大体相同,这里不再赘述。
position一共有五种值:absolute、relative、static、inherit、fixed
前面三种我们一般用的比较多,前面也介绍过了,最后来说说inherit与fixed
fixed:
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position属性的fixed值比较烦,我们在很多网站上看到那种往下拉滑动条还在同一个位置的小广告就是用它做的,因为它根据浏览器窗口进行定位,所以无论内容如何改变它的位置都是不能动摇的。
inherit
规定应该从父元素继承 position 属性的值。
inherit其实没啥好说的,它父元素的position是啥值它就是啥值。
今天的分享就到这里!每天进步多一点,每天都有好心情!
HTML+CSS--position大法好的更多相关文章
- css position的使用
css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
- [CSS]position定位
CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- CSS position &居中(水平,垂直)
css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- 前端开发必知必会:CSS Position 全解析
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- jquery 获取css position的值
jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...
随机推荐
- JavaWeb之Listener监听器
监听在Java体系中运用的很广泛,在安卓开发.JavaWeb开发中到处存在,在其他语言也有类似的,如果有了解过设计模式那很容易理解实现的原理.不过对于开发者来说,使用观察者模式只需实现相应的接口就好, ...
- otool介绍(转http://www.mc2lab.com/?p=68)
1. Otool简介 Otool可以提取并显示ios下目标文件的相关信息,包括头部,加载命令,各个段,共享库,动态库等等.它拥有大量的命令选项,是一个功能强大的分析工具,当然还可以做反汇编的工具使用. ...
- 简单的add函数的N种写法
最近在学习es6,看到for-of这里,就想自己写着练习一下,于是就准备写一个小函数add来求和.函数很简单,如add(1,2,3)这样.于是我开始着手 一开始我是这么写的 function add( ...
- github多用户git push错误remote: Permission to user1/z.git denied to user2
背景:同一台电脑的public key同时添加到了github的两个账户,导致user1的仓库没法正常提交. 解决办法:为两个账户分别配置ssh key,配置~/.ssh/config文件(windo ...
- ng-class 用法
很长时间不写页面很多angualrjs的指令用法忘了,搜搜网上的千篇一律“不全”: 下面我把ngclass的用法列出来!(注:网上只有2种,我补充一种三维运算) 1: ng-class=" ...
- 初步认识Thymeleaf:简单表达式和标签。(一)
本文只适用于不会Java对HTML语言有基础的程序员们,是浏览了各大博客后收集整理,重新编辑的一篇文章,希望能对大家有所帮助. 对于Thymeleaf,网上特别官方的解释无非就是:网站或者独立应用程序 ...
- 解决修改mysql的data_dir所引发的错误
今天,搭建新购的阿里云ECS环境(ubuntu 16.04 LTS),需要将mysql的数据保存在新挂载的磁盘上(已挂载到/mnt下),先停掉mysql服务,然后查看mysql并数据保存的位置: vi ...
- JAVA循环依赖
最近看到一个问题:如果有两个类A和B,A类中有一个B的对象b,B类中有一个A的对象a,那么如何解决这两个类的相互依赖关系呢? 示例代码1 public class Test{ public stati ...
- 大数据测试之初识Hadoop
大数据测试之初识Hadoop POPTEST老李认为测试开发工程师是面向测试的开发,也就是说,写代码就是为完成测试任务服务的,写自动化测试(性能自动化,功能自动化,安全自动化,接口自动化等等)的cas ...
- 性能调优之SQL优化
poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...