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前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
随机推荐
- 洛谷4755 Beautiful Pair （分治）
题目描述 小D有个数列 \(a\),当一个数对 \((i,j)(i\le j)\) 满足\(a_i\)和\(a_j\)的积 不大于 \(a_i \cdots a_j\) 中的最大值时,小D认为这个数对 ...
- Probius+Prometheus通过API集成POD监控
上一篇文章Probius+Kubernetes任务系统如虎添翼讲了我们把Kubernetes集成进了任务系统Probius,上线后小伙伴反馈虽然摆脱了Kubernetes-Dashboard,但还是得 ...
- Golang通脉之方法
方法和接收者 Go语言中的方法(Method)是一种作用于特定类型变量的函数.这种特定类型变量叫做接收者(Receiver).接收者的概念就类似于其他语言中的this或者 self. Go 语言中同时 ...
- Java：ThreadLocal小记
Java:ThreadLocal小记 说明:这是看了 bilibili 上 黑马程序员 的课程 java基础教程由浅入深全面解析threadlocal 后做的笔记 内容 ThreadLocal 介绍 ...
- 安装pytorch的细节记录
1.根据教程安装pytorch的时候发现太慢了,无法容忍,根据https://blog.csdn.net/zzq060143/article/details/88042075z在Ancona Prom ...
- 21.10.9 test
T1 购票方案 \(\color{green}{100}\) 对于每个时间节点维护它作为每种票所能包含的最后一个点时,这种票的起始点位置,由于这个位置是单调的,所以类似双指针维护,\(O(KN)\) ...
- 字符串与模式匹配算法（六）：Needleman–Wunsch算法
一.Needleman-Wunsch 算法 尼德曼-翁施算法(英语:Needleman-Wunsch Algorithm)是基于生物信息学的知识来匹配蛋白序列或者DNA序列的算法.这是将动态算法应用于 ...
- 『学了就忘』Linux基础 — 11、通过setup工具配置Linux系统IP地址
目录 1.setup命令介绍 2.使用setup命令配置IP (1)执行setup命令 (2)进入图形化配置界面 (3)选择配置IP还是DNS (4)选择要配置的网卡 (5)进入IP地址配置页面 (6 ...
- HCNP Routing&Switching之BGP路由属性和优选规则
前文我们了解了BGP防环机制和路由聚合相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15458110.html:今天我们来聊一聊BGP路由属性和选路规 ...
- 写一段java程序来执行linux命令
摘要 在日常开发中,程序员需要经常查询服务器日志来排查问题和调试程序.如果是本地调试还好,但项目一旦发布到服务器上,每次查日志就很麻烦,而且日志量巨大,有时我们无法找到我们需要的信息.经常需要借助第三 ...