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前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...
随机推荐
- C#开发BIMFACE系列47 IIS部署并加载离线数据包
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在前两篇博客<C#开发BIMFACE系列45 服务端API之创建离线数据包>与<C#开发BIMFACE系 ...
- 听说，99% 的 Go 程序员都被 defer 坑过
原文链接: 听说,99% 的 Go 程序员都被 defer 坑过 先声明:我被坑过. 之前写 Go 专栏时,写过一篇文章:Go 专栏|错误处理:defer,panic 和 recover.有小伙伴留言 ...
- PTA数据结构 习题2.8 输出全排列 (20分)
习题2.8 输出全排列 (20分) 请编写程序输出前n个正整数的全排列(n<10),并通过9个测试用例(即n从1到9)观察n逐步增大时程序的运行时间. 输入格式: 输入给出正整数n(<10 ...
- [no code][scrum meeting] Alpha 7
项目 内容 会议时间 2020-04-13 会议主题 OCR技术细节分析 会议时长 30min 参会人员 PM+OCR组成员 $( "#cnblogs_post_body" ).c ...
- 2021NOI同步赛
\(NOI\) 网上同步赛 明白了身为菜鸡的自己和普通人的差距 DAY1 \(T1\) 轻重边 [题目描述] 小 W 有一棵 \(n\) 个结点的树,树上的每一条边可能是轻边或者重边.接下来你需要对树 ...
- 链表中倒数第K个结点 牛客网 程序员面试金典 C++ Python
链表中倒数第K个结点 牛客网 程序员面试金典 C++ Python 题目描述 输入一个链表,输出该链表中倒数第k个结点. C++ /* struct ListNode { int val; struc ...
- word-break leetcoder C++
Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...
- Codeforces Round #738 (Div. 2) D2题解
D2. Mocha and Diana (Hard Version) 至于D1,由于范围是1000,我们直接枚举所有的边,看看能不能加上去就行,复杂度是\(O(n^2logn)\).至于\(n\)到了 ...
- Python 字符串的encode与decode
python的str,unicode对象的encode和decode方法 python中的str对象其实就是"8-bit string" ,字节字符串,本质上类似java中的byt ...
- 第11课 OpenGL 飘动的旗帜
飘动的旗帜: 这一课从第六课的代码开始,创建一个飘动的旗帜.我相信在这课结束的时候,你可以掌握纹理映射和混合操作. 大家好!对那些想知道我在这里作了些什么的朋友,您可以先按文章的末尾所列出的链接,下载 ...