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:centerwidth:200px;height:200px;background:pink;}
1
2
3
4
5
<p>因为是北方,入三月以来,都是阳光洒满整管自己心想如何,自然现象是该来还来。这一场春雨,和风而来,先是淅沥呜咽,继而雨声成片,瞬间天地朦胧模糊,气温骤低,街上行人渐稀,都是能躲的就躲,能坐车的舞啊。</p>
 
<div>相对自己移动位置</div>
 
<p> 在早,我小时候,夏季的雨天,织上睡得小脸粉团,嘴角挂着微笑,玩耍兴奋都带到梦里去了啊。</p>

接着把粉色盒子设置一个相对定位,那么注意观察它移动的位置是在原来自己的基础上去移动的,并且是占位置的定位方式

1
 p{ width:400px;}<br> div{text-align:centerwidth:200px;height:200px;background:pink;position:relative;top:30px;left:40px;}

position:absolute;绝对定位

以同样的案例来使用绝对定位,默认不作定位时还是这个样子

当使用绝对定位之后:

1
2
p{ width:400px;}
div{text-align:centerwidth: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:centerwidth: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 #fffborder-top:0position: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:centerwidth: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 #fffborder-top:0position:absolute;top:0px;left:0;}

css中的定位属性position(转)的更多相关文章

  1. 对css中的定位属性postion刨根解牛

    定位的基本思想很简单: 它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute).另一个元素甚至浏览器窗口本身的位置(fixed).显然,这个功能非常 ...

  2. css中的定位属性

  3. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  4. CSS中的定位与浮动

    CSS中的定位与浮动 本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:st ...

  5. 关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置)

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  6. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  7. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  8. 深入理解css中的margin属性

    深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及 ...

  9. 理解与应用css中的display属性

    理解与应用css中的display属性 display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none block inline inline-block inherit 下面, ...

随机推荐

  1. LeetCode:删除排序数组中的重复项||【80】

    LeetCode:删除排序数组中的重复项||[80] 题目描述 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原 ...

  2. STM32F4XX高效驱动篇1-UART

    之前一直在做驱动方面的整理工作,对驱动的高效性有一些自己的理解这里和大家分享一下.并奉驱动程序,本程序覆盖uart1-8. 串口驱动,这是在每个单片机中可以说是必备接口.可以说大部分产品中都会使用,更 ...

  3. zabbix实现mysql数据库的监控(二)

    上章我们把zabbix的服务端和客户端都部署完成了,本章接着进行两部分的设置: 1  添加对mysql数据库主机的监控 2  添加对mysql数据库的监控 一.对数据库服务器主机监控 1 创建主机 步 ...

  4. _CRT_SECURE_NO_WARNINGS

    在新版编程器的编译过程中我们常常会遇到一些过时或者不安全的函数 举一个简单的例子: 很多带"_s"后缀的函数是为了让原版函数更安全,传入一个和参数有关的大小值,避免引用到不存在的元 ...

  5. 常量池、perm(持久代)、方法区、栈

      常量池.perm(持久代).方法区.栈 常量池指的是在编译期被确定,并被保存在已编译的.class文件中的一些数据. 除了包含代码中所定义的各种基本类型(如:int.long等等)和对象型(如St ...

  6. <HTTP协议详解>由浅入深看HTTP

    一. HTTP协议的应用简单概况 HTTP协议的主要特点可概括如下: 1.支持客户/服务器模式.2.简单快速:客户向服务器请求服务时,只需传送请求方法和路径.请求方法常用的有GET.HEAD.POST ...

  7. LINQ 学习路程 -- 查询例子

    IList<Student> studentList = new List<Student>() { , StudentName = , StandardID = } , , ...

  8. MSSQL遇到以零作除数错误的处理方法

    在sql server中做除法处理的时候,我们经常需要处理除数为零的情况,因为如果遇到这种情况的时候,sqlserver会抛出遇到以零作除数错误的异常,我们总不希望把这个异常显示给用户吧. 做个会报这 ...

  9. 如何设置minSdkVersion和targetSdkVersion

    转http://www.07net01.com/2015/07/878098.html minSdkversion和targetSdkVersion相信很多人都不太理解,我在网上也看了许多关于这两者区 ...

  10. algorithm 简单用法

    algorithm 简单用法 #include <iostream> #include <vector> #include <algorithm> using na ...