css中的定位属性position(转)
css中的定位属性position
同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者。
在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来实现的一些特效经常会用到定位属性,比如鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquery实现京东商品分类导航的类似这样的布局也是要结合定位属性来实现,但是上一次着重只写了jquery.
那么这次我想将定位属性的运用拿来说一下。
定位属性position常用的取值:relative/absolute/fixed;一般配合方向属性使用:top,left,right,bottom.
position:relative;相对定位
相对定位是占位置的定位方式,它的参照物是自己;
首先将一个粉色的盒子div放在两段文字中间,不作任何位置的调整:
1
2
|
p{ width : 400px ;} div{ text-align : center ; width : 200px ; height : 200px ; background :pink;} |
1
2
3
4
5
|
< p >因为是北方,入三月以来,都是阳光洒满整管自己心想如何,自然现象是该来还来。这一场春雨,和风而来,先是淅沥呜咽,继而雨声成片,瞬间天地朦胧模糊,气温骤低,街上行人渐稀,都是能躲的就躲,能坐车的舞啊。</ p > < div >相对自己移动位置</ div > < p > 在早,我小时候,夏季的雨天,织上睡得小脸粉团,嘴角挂着微笑,玩耍兴奋都带到梦里去了啊。</ p > |
接着把粉色盒子设置一个相对定位,那么注意观察它移动的位置是在原来自己的基础上去移动的,并且是占位置的定位方式:
1
|
p{ width : 400px ;}<br> div{ text-align : center ; width : 200px ; height : 200px ; background :pink; position : relative ; top : 30px ; left : 40px ;} |
position:absolute;绝对定位
以同样的案例来使用绝对定位,默认不作定位时还是这个样子
当使用绝对定位之后:
1
2
|
p{ width : 400px ;} div{ text-align : center ; width : 200px ; height : 200px ; background :pink; position : absolute ; top : 30px ; left : 40px ;} |
1、相对于浏览器定位了,相对于浏览器上面移动30px.左边移动40px;
2、在文字上方显示,表示绝对定位不占位置(就像在空中飞起来一样,所以常用绝对定位来实现页面上显示隐藏的效果,哪怕显示在页面上也不会影响布局,比如下拉菜单)
但是,绝对定位还有一个好处就是默认的参照物是浏览器,但是它的参照物是可以修改的,也就是可以设置到底相对于谁去定位,比如下拉菜单肯定是相对于自己的父级去定位。
那么设置绝对定位的参照物的使用规则是:父级相对,子级绝对!
也就是说如果一个盒子想相对自己的父级去移动位置的话,那么就给选定好的父级position:relative;自己绝对定位:position:absolute;并且配合方向属性移动 ,top,left,right,bottom.
现在构建一个环境,父级li,要定位的是span:
1
2
|
li{ text-align : center ; width : 80px ; height : 30px ; line-height : 30px ; background : #333 ; float : left ; margin : 0 5px ; position : relative ;} span{ width : 78px ; height : 100px ; background :rgba( 0 , 153 , 0 , 0.7 ); border : 1px solid #fff ; border-top : 0 ; position : absolute ; top : 30px ; left : 0 ;} |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
< ul > < li > < a href="#">首页</ a > < span ></ span > </ li > < li > < a href="#">案例</ a > </ li > </ ul > < p >因为是北方,入三月以来,都是阳光洒满整管自己心想如何,自然现象是该来还来。这一场春雨,和风而来,先是淅沥呜咽,继而雨声成片,瞬间天地朦胧模糊,气温骤低,街上行人渐稀,都是能躲的就躲,能坐车的舞啊。</ p > |
运行:(li是背景深灰色的导航,白色文字是a标签的文字,绿色透明的是类似下拉菜单的span,span是通过父级li相对定位,也就是确定参照物是li之后,自己绝对定位,并且相对父级li的移动距离为top:30px;left:0;)
如果top:0;的话,那么应该就是和父级顶部紧挨着,所以看出span绝对定位的参照物是使用了相对定位的父级li:
1
2
|
li{ text-align : center ; width : 80px ; height : 30px ; line-height : 30px ; background : #333 ; float : left ; margin : 0 5px ; position : relative ;} span{ width : 78px ; height : 100px ; background :rgba( 0 , 153 , 0 , 0.7 ); border : 1px solid #fff ; border-top : 0 ; position : absolute ; top : 0px ; left : 0 ;} |
css中的定位属性position(转)的更多相关文章
- 对css中的定位属性postion刨根解牛
定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...
- css中的定位属性
- CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
- CSS中的定位与浮动
CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...
- 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)
关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html 前言:最近在 ...
- CSS 中关于background 属性功能
background 是 css中的核心属性,我们对他应该充分了解. background-image 定义背景图像 这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...
- css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
- 深入理解css中的margin属性
深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...
- 理解与应用css中的display属性
理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...
随机推荐
- 如何解决Asp.Net MVC和WebAPI的Controller名称不能相同的问题
1.问题描述 假如有一个文章的业务(Article),我们在 Controllers文件夹中创建MVC Controller和Api Controller,各个Controller中都有相同的获取文章 ...
- CSS知识点 2
回顾: 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式:1.给父盒子添加高度,一般导航栏2.给浮动元素后面加一个空的块标签, 并 ...
- Docker Copy On Write
Container分成结构 Container最上面是一个可写的容器层,以及若干只读的镜像层组成,Container的数据就存放在这些层中,这样的分层结构最大的特性是Copy-On-Write: 1. ...
- CSS整体布局
主要内容: 一.外边距margin与填充padding 二.浮动float与显示display 三.主布局 四.定位方式posotion 一.外边距margin与填充padding 1.margin设 ...
- mysql 根据sql查询语句导出数据
在这里提供2中方式: 建议:可以使用方式二,就不使用方式一. 方式一: 在linux下支持,window下不支持. 进入到mysql的bin目录,或者已经给mysql配置了环境变量就不用进入bin目录 ...
- neutron qos Quality of Service
Quality of Service advanced service is designed as a service plugin. The service is decoupled from t ...
- Spark- 优化后的 shuffle 操作原理剖析
在spark新版本中,引入了 consolidation 机制,也就是说提出了ShuffleGroup的概念.一个 ShuffleMapTask 将数据写入 ResultTask 数量的本地文本,这个 ...
- iis常见问题解决
iis7以上版本部署4.0框架项目常见问题解决 配置错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的 (overrideModeDefault=&quo ...
- centos虚拟机启用网卡
CentOS虚拟机安装成功后,默认开机未启用网关,通过修改配置文件,启用网卡 编辑系统配置文件,虚拟机完成后,系统安装了一个默认的网卡,即eth0,其配置文件的路径为/etc/sysconfig/ne ...
- java:Maven构建项目速度太慢的解决办法,以及报错Retrieving archetypes:' has encountered a problem
如果报错信息如下: Retrieving archetypes:' has encountered a problemAn internal error occurred during:"R ...