css 中相对定位和绝对定位
1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位
2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置
相对定位:
相对于自身原有位置(就是普通流的时候)进行偏移(设置top, left...后)
仍然处于标准文档流中
随即拥有偏移属性和z-index属性
绝对定位:
建立了以包含块为基准的定位
完全脱离了标准文档流
随即拥有偏移属性和z-index属性
3. 先上示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.class1 {
height: 100px;
background-color: blue
}
.class2 {
position:relative; /*去掉后子元素会以html为参照物*/
height: 50px;
background-color: green;
}
.class3 {
height: 80px;
background-color: red;
}
.child {
height: 20;
position:absolute;
top: 10px;
left: 30px;
background-color:gold;
}
</style>
</head>
<body>
<div class="class1"></div>
<div class="class2">
<div class="child">
Jason Zeng
</div>
</div>
<div class="class3"></div>
</body>
</html>
祖先元素设置了定位
.class2 {
position:relative; /*去掉后子元素会以html为参照物*/
height: 50px;
background-color: green;
}
祖先元素没有设置定位
.class2 {
height: 50px;
background-color: green;
}
4.总结: 绝对定位时偏移参考物:
无已定位的祖先元素(包裹它的所有层都没有设置position属性): 以<html>为偏移参照物
有已定位的祖先元素: 以距其最近的已定位的祖先元素为偏移参照基准
css 中相对定位和绝对定位的更多相关文章
- CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之: 博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html 文章中,主要需要参考的有两点: 1,相对 ...
- css中相对定位和绝对定位
相对定位: #box_relative { position: relative; left: 30px; top: 20px; } 绝对定位: #box_relative { position: a ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- Web—12-详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- 详解CSS的相对定位和绝对定位（讲得很详细）
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- 详细讲解CSS中相对定位relative和绝对定位absolute
很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...
- h5整理--详解css的相对定位和绝对定位
浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
随机推荐
- TCP/IP 传输原理
TCP传输原理简单说明 TCP传输需要经过3次握手4次挥手. 三次握手 当客户端向服务端进行连接时,会发送一个SYN报文,请求服务端监听端口,服务端确认请求后,会向客户端发送ACK确认,客户端 ...
- 20145307第一周JAVA实验报告
20145307 <Java程序设计>第一次实验实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.08 ...
- 20144303 《Java程序设计》第二次实验实验报告
20144303 <Java程序设计>第二次实验实验报告 北京电子科技学院(besti)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握U ...
- 【纯代码】Swift-自定义PickerView单选（可修改分割线颜色、修改字体大小、修改字体颜色。）（可根据需要自己扩展）
typealias PopPickerViewCallBackClosure = (_ resultStr:NSString?) -> () class PopPickerView : UIVi ...
- 项目总结--基于Cortex-A9平台的米兰花智能培育系统
基于Cortex-A9平台的米兰花智能培育系统 1. 系统功能概述 本系统主要实现了模拟米兰花智能培育的过程.通过前端传感器采集相关环境因子数据经ZigBee组网发送到协调器汇总,网关通过串口读取协调 ...
- 从零开始玩转JMX(一)——简介和Standard MBean
JMX的全称为Java Management Extensions. 顾名思义,是管理Java的一种扩展.这种机制可以方便的管理.监控正在运行中的Java程序.常用于管理线程,内存,日志Level,服 ...
- Apache Kafka之设计
转自: http://blog.csdn.net/kevin_hx001/article/details/9413565 http://kafka.apache.org/design.h ...
- centos7 firewall 操作
一.firewall配置 The configuration for firewalld is stored in various XML files in /usr/lib/firewalld/ a ...
- windchill系统安装大概步骤
1.安装VMware Workstation虚拟机 2.win7的64位操作系统(为什么不用32位?因为32位的内存最大只能设置4G) 3.安装Oracle数据库(映射iso文件[上面栏的虚拟机-&g ...
- python正则表达式 Python Re模块
最近在学python 练习的时候随手写的,方便以后自己参考~如果能对其他同学有所帮助就再好不过了 希望大家指正哦~ 我会随时整理的,先这样~ 正则表达式 1.元字符([ ]),它用来指定一个char ...