html+css第六篇-定位
relative相对定位/定位偏移量
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响； 定位元素位置控制
top/right/bottom/left 定位元素偏移量。 absolute绝对定位/定位层级 position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用； z-index:[number]； 定位层级
a、定位元素默认后者层级高于前者； 遮罩滤镜/固定定位 遮罩弹窗（优酷弹窗）
标准 不透明度： opacity:0~1;
IE 滤镜： filter:alpha(opacity=0~100); position:fixed； 固定定位
与绝对定位的特性基本一致，的差别是始终相对整个文档进行定位；
问题：IE6不支持固定定位； 定位其他
定位其他值：
position:static ； 默认值
position:inherit ; 从父元素继承定位属性的值 position:relative | absolute | fixed | static | inherit; 定位的兼容问题、清浮动方法
position:relative;
在 IE6 下父级的 overflow:hidden; 包不住子级的relative; position:absolute;
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。 position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法； position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法；（IE6不兼容）
相对定位
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>范例</title>
<style>
div{font-size:20px;} .box1{width:100px;height:100px; background:red;}
.box2{width:100px;height:100px;background:blue;
position:relative;left:100px;top:100px; }
.box3{width:100px;height:100px;background:green;}
/*
position:relative; 相对定位
a、不影响元素本身的特性；
b、不使元素脱离文档流；
c、如果没有定位偏移量，对元素本身没有任何影响； 定位元素位置控制
top/right/bottom/left 定位元素偏移量。 */ </style>
</head> <body> <div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div> </body>
</html>
图片“：
绝对定位1
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>范例</title>
<style>
div{font-size:20px;} .box1{width:100px;height:100px; background:red; position:absolute;}
.box2{width:200px;height:200px;background:blue; }
.box3{width:100px;height:100px;background:green;}
/*
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度； */ </style>
</head> <body> <div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div> </body>
</html>
图片：
绝对定位2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>范例</title>
<style>
div{font-size:20px;} body{border:1px solid black;}
/*
body < html < 文档
*/ .box1{width:300px;height:300px; background:red; position:relative;}
.box2{width:200px;height:200px;background:blue;}
.box3{width:100px;height:100px;background:green; position:absolute;right:0;bottom:0;}
/*
position:absolute; 绝对定位
a、使元素完全脱离文档流；
b、使内嵌支持宽高；
c、块属性标签内容撑开宽度；
d、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
e、相对定位一般都是配合绝对定位元素使用； */ </style>
</head> <body> <div class="box1"><!-- 定位父级(干爹) -->
<div class="box2"><!-- 结构父级(亲爹) -->
<div class="box3"></div><!-- 绝对定位元素(儿子) -->
</div>
</div> </body>
</html>
图片：
定位层级
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>范例</title>
<style>
div{font-size:20px;} .box1{width:100px;height:100px; background:red; position:absolute; z-index:1;}
.box2{width:200px;height:200px;background:blue; position:relative;}
.box3{width:100px;height:100px;background:green;}
/*
定位元素 默认后者层级高于前者 z-index:[number]； 定位层级 */ </style>
</head> <body> <div class="box1">div1</div>
<div class="box2">div2</div>
<div class="box3">div3</div> </body>
</html>
图片：
优酷弹窗
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>范例</title>
<style>
body{margin:0;} /*
body< html < 文档
*/ body,html{height:100%;} .floats{position:absolute;top:0;left:0; width:100%; height:100%; background:#000;
opacity:0.5;filter:alpha(opacity=50);
}
.alert{width:400px; height:200px; background:#fff; border:2px solid yellow; position:absolute;top:50%;left:50%; margin-top:-102px; margin-left:-202px;}
/*
标准 不透明度 opacity:0~1;
IE私有 filter:alpha(opacity=0~100); */ </style>
</head> <body> 内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/>
内容内容内容内容内容内容内容内容内容内容内容<br/> <div class="floats"></div>
<div class="alert"></div> </body>
</html>
html+css第六篇-定位的更多相关文章
- 2天驾驭DIV+CSS （技巧篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS （实战篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- Python之路【第十六篇】：Django【基础篇】
Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...
- CSS盒模型和定位的类型
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇（图片新闻的添加以及带分页的静态页的生成）
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...
- 第六篇 ANDROID窗口系统机制之显示机制
第六篇 ANDROID窗口系统机制之显示机制 ANDROID的显示系统是整个框架中最复杂的系统之一,涉及包括窗口管理服务.VIEW视图系统.SurfaceFlinger本地服务.硬件加速等.窗口管理服 ...
- 跟我学SpringCloud | 第十六篇：微服务利剑之APM平台（二）Pinpoint
目录 SpringCloud系列教程 | 第十六篇:微服务利剑之APM平台(二)Pinpoint 1. Pinpoint概述 2. Pinpoint主要特性 3. Pinpoint优势 4. Pinp ...
- 奇妙的CSS之布局与定位
前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
随机推荐
- Python中is与==区别
1.在Python中,id是什么?id是内存地址,那就有人问了,什么是内存地址呢? 你只要创建一个数据(对象)那么都会在内存中开辟一个空间,将这个数据临时加在到内存中,那么这个空间是有一个唯一标识的, ...
- VMware中Linux虚拟机与Windows主机共享文件夹
VMware下Linux虚拟机与Windows主机共享文件夹 1. 安装vm-tool 2. 开启共享文件夹 虚拟机->设置->选项->共享文件夹"右边选择"总是 ...
- FastAPI 学习之路（十三）Cookie 参数,Header参数
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- 第二次Alpha Scrum Meeting
本次会议为Alpha阶段第二次Scrum Meeting会议 会议概要 会议时间:2021年4月24日 会议地点:线上会议 会议时长:30min 会议内容简介:本次会议主要由每个人展示自己目前完成的工 ...
- [对对子队]会议记录4.19(Scrum Meeting10)
今天已完成的工作 何瑞 工作内容:搭建第2关,基本完成第3关 相关issue:搭建关卡2.3 相关签入:4.19签入1 4.19签入2 刘子航 工作内容:完成关卡选择界面的设计图 ...
- Asp.net Core使用EFCore+Linq进行操作
注:EFCore和EF有区别,在core中写的也有一点区别,每个人写法不同仅供参考写的比较细致耐性一点看完会有收获的 首先加上必要的引用 using Microsoft.EntityFramework ...
- gdal3.1.0+VS2017+geos+kml编译总结
1.简介 gdal3.1.0编译过程中必须依赖proj,编译gdal必须要编译proj,proj的编译需要sqlite3,因此想要编译gdal3.1.0需要先编译proj和sqlite3 2.关于sq ...
- 线路由器频段带宽是是20M好还是40M好
无线路由器频段带宽还是40M好. 40M的信号强,速度快. 1.20MHz在11n的情况下能达到144Mbps带宽.穿透性不错.传输距离较远 40MHz在11n的情况下能达到300Mbps带宽.穿 ...
- Beam Search快速理解及代码解析
目录 Beam Search快速理解及代码解析(上) Beam Search 贪心搜索 Beam Search Beam Search代码解析 准备初始输入 序列扩展 准备输出 总结 Beam Sea ...
- SpringBoot教程（学习资源）
SpringBoot教程 SpringBoot–从零开始学SpringBoot SpringBoot教程1 SpringBoot教程2 --SpringBoot教程2的GitHub地址 SpringB ...