【CSS】绝对定位和相对定位
html:定位层
特点:
>>完全脱离默认文档流，独立于立体层面的Z轴之上。
>>和float浮动一样都脱离了默认文档流，但float元素与默认文档流之间会相互产生影响，而定位层元素则完全独立，互不干扰
>>让元素inline-block化
>>例如一个div标签默认宽度是100%显示的，但是一旦变成absolute绝对定位，则默认独占一行的宽度就会变成自适应内部元素的宽度
>> 通常当我们将html元素设置成了定位层之后，就需要指定其宽度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位和相对定位</title>
<style>
.position-div{
background-color:#ff0;
position:absolute;
} .float-div{
float: left;
background-color: #8FE083;
}
</style>
</head>
<body> <div class="position-div">绝对定位div</div>
<br><br><br><br><br><br>
<div class="float-div">浮动div</div>
</body>
</html>
绝对定位和相对定位的区别:
>> absolute元素完全脱离默认文档流，不保留占位空间
>> relative元素完全脱离默认文档流，但仍然保留在默认文档流中的占位空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位和相对定位</title>
<style>
.absolute{
background-color:#ff0;
position:absolute;
width:50px;
height:50px;
} .relative{
background-color:#ff0;
position:relative;
width:50px;
height:50px;
}
</style>
</head>
<body> <p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<div class="absolute">绝对定位</div>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p> <hr color="red"/>
<hr color="red"/>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<div class="relative">相对定位</div>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p>
<p>段落呀段落喂~~~</p> </body>
</html>
相对层+绝对层的应用技巧:
>> 1、在页面中给某个元素(父级对象)设置相对定位，使其成为所包含的子级对象的定位参照物。
通常不设置其具体定位位置，保留其占据默认文档流空间的特性，不妨碍整体布局。
>> 2、相对层对象的内部，添加子级对象设置绝对定位，然后用相关定位属性控制其位置，以实现重叠或位移效果。
实际应用方案:
>>将relative相对层(父级)和absolute绝对层(子级)结合一起使用。实现某些栏目或板块中，内容元素的重叠或位移效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位层的应用演示</title>
<style>
*{margin:0;padding:0;}
ul li{list-style:none;} .vedio-list{
margin-top:200px;
}
.vedio-list li{
width:270px;
position:relative;
float:left;
margin-left:10px;
}
.vedio-list li img{width:270px;}
.vedio-list li p{font-size:14px;line-height:20px;}
.vedio-list li i{
background: url(./tag.png);
width:28px;
height:18px;
position:absolute;
top:5px;
right:5px;
} .vedio-list li b{
font-size:12px;
color:#fff;
background-color:#000;
padding:2px 4px;
position:absolute;
left:5px;
top:120px;
}
</style>
</head>
<body>
<ul class="vedio-list">
<li>
<img src="./宫.jpg" alt="">
<p>宫 泰国版</p>
<i></i>
<b>1080p</b>
</li> <li>
<img src="./来自海洋的你.jpg" alt="">
<p>来自海洋的你</p>
<i></i>
<b>1080p</b>
</li> <li>
<img src="./扶摇.jpg" alt="">
<p>扶摇</p>
<i></i>
<b>1080p</b>
</li> <li>
<img src="./壮志高飞.jpg" alt="">
<p>壮志高飞</p>
<i></i>
<b>1080p</b>
</li> <li>
<img src="./重返二十岁.jpg" alt="">
<p>重返二十岁</p>
<i></i>
<b>1080p</b>
</li>
</ul>
</body>
</html>
【CSS】绝对定位和相对定位的更多相关文章
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
- CSS绝对定位和相对定位 position: absolute/relative
absolute(绝对定位): 会把对象拖离HTML文档流,并通过top, left, right, bottom确定对象的具体位置,这个四个位置属性至少要设置一个,否则无法激活对象的absolute ...
- CSS 绝对定位和相对定位
CSS定位属性:一个定位属性,需配合四个定位坐标,实现定位 固定定位fixed 说明: 1.固定定位是相对于"浏览器窗口" 2.如果只设置了定位属性,未指定定位坐标时,元素将停留在 ...
- CSS 绝对定位与相对定位的区别
设置为绝对定位的元素框从文档流完全删除, 并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块. 元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样. 元素定位后生成一 ...
- HTML 学习笔记 CSS样式（相对定位 绝对定位）
CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
- [Web 前端] CSS 盒子模型，绝对定位和相对定位
cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...
- Css的向左浮动、先右浮动、绝对定位、相对定位的简单使用
1.div层的浮动 1)div向左浮动.向右浮动 <!doctype html> <html> <head> <meta charset="utf- ...
- 辛星和你彻底搞清CSS中的相对定位和绝对定位
前面我在解读CSS中也说过了关于相对定位和绝对定位的问题.无奈还是有些童鞋表示迷茫,于是另开一篇博客,来具体解读相对定位和绝对定位.希望可以以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为 ...
- css中的绝对定位和相对定位（详解，总结）
css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
随机推荐
- 《Linux内核设计与实现》读书笔记 5
第五章系统调用 5．1与内核通信 系统调用在用户空间进程和硬件设备间添加了一个中间层, 作用:为用户空间提供了一种硬件的抽象接口:保证了系统的稳定和安全,避免应用程序不正确使用硬件,窃取其他进程的资源 ...
- 关于对springboot程序配置文件使用jasypt开源工具自定义加密
一.前言 在工作中遇到需要把配置文件加密的要求,很容易就在网上找到了开源插件 jasypt (https://github.com/ulisesbocchio/jasypt-spring-boot# ...
- Rabbitmq vs. kafka
https://mp.weixin.qq.com/s/2i_9TWoF3TsJvG6Dj_75vw http://www.cnblogs.com/valor-xh/p/6348009.html htt ...
- 转载 loadrunner的一些问题解决
sckOutOfMemory 7 内存不足 sckInvalidPropertyValue 380 属性值不效 sckGetNotSupported 394 属性不可读 sckGetNotSup ...
- [转帖]老狼：你知道哪些关于 Windows 10 的骚操作？
作者:老狼链接:https://www.zhihu.com/question/265781599/answer/579939418来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- [CNBETA]动图告诉你 光速到底有多慢？
https://www.cnbeta.com/articles/tech/811381.htm 我们知道,30万公里每秒的光速是宇宙内目前已知的最高速度,至少现有人类理论体系下它是不可跨越的.30万公 ...
- DVWA的安装与简单使用
参考资料: http://www.freebuf.com/articles/web/119150.html 尝试使用linux机器安装,但是因为下载php版本以及各种兼容性的问题耗时较长, 所以后来选 ...
- （C++）关于i++和i++的左值、右值问题
1.什么是左值和右值? 左值就是出现在表达式左边的值(等号左边),可以被改变,他是存储数据值的那块内存的地址,也称为变量的地址: 右值是指存储在某内存地址中的数据,也称为变量的数据. 左值可以作为右值 ...
- BZOJ1047[HAOI2007]理想的正方形——二维ST表
题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入 第一行为3个整数,分别表示a,b,n的值第二行至第a+1行每行为b个非 ...
- 码云平台IDEA系列的插件使用
一.IDEA插件安装 file -- setting -- Plugins -- 搜索gitee -- Search in repositories 安装后重启编译器 二.登录并拉取项目 file ...