[Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位
- 我们可以使用 css 的 position 属性来设置元素的定位类型
postion 的设置项如下
| 设置项 | 释义 |
|---|---|
| relative | 生成相对定位元素 元素所占据的文档流的位置不变 元素本身相对文档流的位置进行偏移 |
| absolute | 生成绝对定位元素 元素脱离文档流 不占据文档流的位置 可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位 如果找不到，则相对于 body 元素进行定位 |
| fixed | 生成固定定位元素 元素脱离文档流 不占据文档流的位置 可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位 |
| static | 默认值，没有定位 元素出现在正常的文档流中 相当于取消定位属性或者不设置定位属性 |
简单地说
- relative
- 相对定位
- 不脱离文档流
- 相对于自己本身的位置进行定位
- absolute
- 绝对定位
- 脱离文档流
- 位置相对于已定位的父级
- 如果没有父级，或父级没有定位，那么相对于文档 (body)的 00 点
- fixed
- 固定定位
- 脱离文档流
- 位置相对于浏览器窗口 进行定位
少废话，上例子
例 1
<!-- 例1 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
</body>
</html>
<!-- 例1.1 -->
*{
margin: 0;
padding: 0
}
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
}
- 效果截图 1
<!-- 例1.2 -->
*{
margin: 0;
padding: 0
}
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
margin:0 200px; /* 加了这句 */
}
- 效果截图 2
<!-- 例1.3 -->
*{
margin: 0;
padding: 0
}
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
/* 通过 position: 设置元素的定位
relative: 相对定位
以元素本身位置为参考点进行偏移
不会脱离文档流 */
position: relative;
left: 300px;
top: 100px;
}
- 效果截图 3
<!-- 例1.4 -->
*{
margin: 0;
padding: 0
}
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
margin:0 200px;
/* 通过 position: 设置元素的定位
relative: 相对定位
以元素本身位置为参考点进行偏移
不会脱离文档流 */
position: relative;
left: 300px;
top: 100px;
}
- 效果截图 4
例 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="wrap">
<div class="box2">box2</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0
}
div{
width: 200px;
height: 200px;
}
.wrap{
width: 500px;
height: 300px;
margin: 0 100px;
border: 2px solid;
/* position: relative; 添加定位属性，若加上这一句，效果见交过截图 6 */
}
.box1{
background: red;
margin:0 200px;
position: relative;
left: 200px;
top: 100px;
}
.box2{
background: green;
/* 设置绝对定位
position: absolute;
以有定位属性的父级为参考点进行偏移，
如果父级元素没有定位属性，继续向上一级元素找
如果找到，就以该级元素为参考进行偏移，
如果找不到，一直想向上寻找，直到 body 为止
会脱离文档流，不占文档位置 */
position: absolute;
left: 100px;
top: 100px;
}
- 效果截图 5
- 效果截图 6
2. 定位元素的特性
- 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
3. 定位元素的层级
- 定位元素是浮动在正常的文档流之上的
- 可以用 z-index 属性来设置元素的层级
少废话，上例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="./static/CSS/test.css">
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
*{
margin: 0;
padding: 0
}
div{
width: 200px;
height: 200px;
}
.box1{
background: red;
position: relative;
left: 100px;
top: 100px;
/* 设置定位的层级 谁在后面定位谁就在上面
改变层级使用 z-index:
z-index: 2; 加上这句，效果见效果截图 8 */
}
.box2{
background: green;
position: absolute;
left: 100px;
top: 100px;
}
- 效果截图 7
- 效果截图 8
参考：北京图灵学院的 Web 前端公开课
[Web 前端] 019 css 定位之绝对定位与相对定位的更多相关文章
- [Web 前端] 020 css 定位之绑定定位
绑定定位 少废话,上例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- 谈谈Web前端工程师的定位
原文地址:http://www.360doc.com/content/10/0708/17/1277406_37692580.shtml 2010-07-08 锋子chans 阅 1116 转 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 好程序员web前端分享CSS元素类型
好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...
- 1+x 证书 Web 前端开发 css 专项练习
官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/
- css中的绝对定位和相对定位（详解，总结）
css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...
随机推荐
- AtCoder Beginner Contest 088 D Grid Repainting
Problem statement We have an H×W grid whose squares are painted black or white. The square at the i- ...
- 洛谷 P4665 [BalticOI 2015]Network
洛谷 P4665 [BalticOI 2015]Network 你有一棵 $ n $ 个节点的树,你可以在树上加一些边,使这棵树变成一张无重边.自环的图,且删掉任意一条边它仍然联通.求最少要加多少条边 ...
- vue开发知识点总结
一.vue介绍 Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架,是一个轻量级MVVM(model-view-viewModel)框架. 二.数据绑定 最常用的方式:Musta ...
- Docker(二)：Docker入门教程
前言 Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到任何流行的 ...
- 【NOIP2013模拟】DY引擎
题目 BOSS送给小唐一辆车.小唐开着这辆车从PKU出发去ZJU上课了. 众所周知,天朝公路的收费站超多的.经过观察地图,小唐发现从PKU出发到ZJU的所有路径只会有N(2<=N<=300 ...
- [洛谷P2567] SCOI2010 幸运数字
问题描述 在中国,很多人都把6和8视为是幸运数字!lxhgww也这样认为,于是他定义自己的"幸运号码"是十进制表示中只包含数字6和8的那些号码,比如68,666,888都是&quo ...
- JS audio播放一个的时候，其他正在播放的关闭
audio在使用中,如果有多个,在播放的时候,如果一个声音没有播放完继续下一个的话,原来正在播放的并不会关闭(在Android和PC上测试是这样,苹果产品不清楚) 现在需要做的是,当播放其中一个的时候 ...
- 给网页头部标题加logo
现在在写公司的官网,需要在网页的头部加logo,没有加的时候是这样的 那么,现在只要一步,就可以了,加上一行代码 <link rel="icon" href="图标 ...
- Java数据结构之排序---冒泡排序
冒泡排序的基本思想: 通过对待排序序列从前到后(从下标小的元素开始),依次比较相邻位置的元素的值,若发现与给定的次序冲突,则交换位置(假设数值大的数放在序列的后面),使数值较大的元素逐渐从前移动到后部 ...
- 语法检查程序LanguageTool学习和使用笔记
这是LanguageTool的官方语法规则说明,一定要仔细研究,学会这个语法,就可以自己编写语法检查规则了,这篇文档上说,编写这份语法检查文档,你甚至都不需要是一名程序员: http://wiki.l ...