css中的定位属性position

  • 时间:2018-12-21 23:09 作者:陌霖Java架构 来源:陌霖Java架构 阅读:164
  • 扫一扫,手机访问
摘要:css中的定位属性position同样的也是上课的时候发现学生难以了解的少量问题拿出来记录一下,希望帮助初学者。在css中定位属性position的运用在页面中是很常用的,特别是少量结合js来实现的少量特效经常会用到定位属性,比方鼠标滑过显示被隐藏的盒子, banner的切换,还有之前写的jquer

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;}
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;}

position:fixed;固定定位

这个固定定位的参照物是浏览器,常用在固定在浏览器某一个位置上的导航条,提醒,或者者弹窗等,只需使用了这个固定定位,不管浏览器类容有多少,就算滑动浏览器滑块,使用固定定位的的盒子永远就在固定的位置:

例如淘宝网上的搜索栏和右边指示栏:

z-index:调整定位的盒子的层级或者者说是上下关系

既然说到定位,就少不了详情一下z-index这个属性;这个属性是调整使用过定位属性的盒子的层级关系,

例如:两个子级都相对于父级绝对定位

1
2
3
.box{width:200px;height:200px;background:pink;position:relative;margin:0 auto;}
.box01{ width:100px;height:100px;background:green;position:absolute;top:20px;left:20px;}
.box02{ width:100px;height:100px;background:red;position:absolute;top:40px;left:40px;}
1
2
3
4
<div class="box">
<div class="box01">box01div>
<div class="box02">box02div>
div>

后面写的盒子定位后会靠最上显示,比方box2

假如通过z-index:整数值;来设置的话,即可以调整box1和box2的层级关系:

1
2
3
.box{width:200px;height:200px;background:pink;position:relative;margin:0 auto;}
.box01{ width:100px;height:100px;background:green;position:absolute;top:20px;left:20px;z-index:2;}
.box02{ width:100px;height:100px;background:red;position:absolute;top:40px;left:40px;z-index:1;}

谁的值大,谁的位置就靠上:

这里对定位属性进行了简单讲解,希望帮助需要帮助的人!

欢迎各位大牛、大神或者者想学习的朋友莅临加我QQ进行交流:647886443

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部