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第六篇-定位的更多相关文章

  1. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  2. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  3. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  4. Python之路【第十六篇】：Django【基础篇】

    Python之路[第十六篇]:Django[基础篇]   Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了O ...

  5. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  6. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇（图片新闻的添加以及带分页的静态页的生成）

    “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...

  7. 第六篇 ANDROID窗口系统机制之显示机制

    第六篇 ANDROID窗口系统机制之显示机制 ANDROID的显示系统是整个框架中最复杂的系统之一,涉及包括窗口管理服务.VIEW视图系统.SurfaceFlinger本地服务.硬件加速等.窗口管理服 ...

  8. 跟我学SpringCloud | 第十六篇：微服务利剑之APM平台（二）Pinpoint

    目录 SpringCloud系列教程 | 第十六篇:微服务利剑之APM平台(二)Pinpoint 1. Pinpoint概述 2. Pinpoint主要特性 3. Pinpoint优势 4. Pinp ...

  9. 奇妙的CSS之布局与定位

    前言 关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有 ...

随机推荐

  1. codeforces316E3 Summer Homework（线段树，斐波那契数列）

    题目大意 给定一个n个数的数列,m个操作,有三种操作: \(1\ x\ v\) 将\(a_x\)的值修改成v $2\ l\ r\ $ 求 \(\sum_{i=l}^r x_i*f_{i-l}\) 其中 ...

  2. 项目问题记录------Mabatis动态sql语句

    现在在做一个模糊查询功能,使用两个查询条件: 条件1:下拉框选择的产品名 条件2:输入框输入的用户名 需求1:下拉框的选项是从数据库里导出来的产品名,此外,添加一个选项"全部产品" ...

  3. java链接并操作数据库

    链接准备 MySQL数据库驱动(连接器).mysql-connector-java-x.x.xx.jar会在MySQL安装时提供,若Mysql是默认安装路径,则连接器在:C:\Program File ...

  4. [no code][scrum meeting] Alpha 12

    项目 内容 会议时间 2020-04-19 会议主题 周总结会议 会议时长 45min 参会人员 全体成员 $( "#cnblogs_post_body" ).catalog() ...

  5. BUAA软件工程结对项目作业

    BUAA软件工程结对项目 小组成员:16005001,17373192 1.教学班级和项目地址 项目 内容 这个作业属于哪个课程 博客园班级连接 这个作业的要求在哪里 结对项目作业 我在这个课程的目标 ...

  6. no_code团队介绍和bingduoduo项目采访

    项目 内容 课程:北航-2020-春-软件工程 博客园班级博客 要求 团队作业-团队介绍和采访 成员简介 name avatar intro PM Dev Test UI/Front-End 伦泽标 ...

  7. FastAPI 学习之路（三十三）操作数据库

    通过创建pydantic模型进行验证提交数据 from pydantic import BaseModel class UserBase(BaseModel): email: str class Us ...

  8. Vue项目搭建常用的配置文件，request.js和vue.config.js

    request.js用来请求数据,封装的代码如下: import axios from 'axios' const request = axios.create({ timeout: 5000 }) ...

  9. DP接口中AUX

    背景技术: DP接口(DisplayPort)是一种图像显示接口,它不仅可以支持全高清显示分辨率(1920×1080),还能支持4k分辨率(3840×2160),以及最新的8k分辨率(7680×432 ...

  10. 算法：Z字型（Zigzag）编排

    问题:给定 n 行和 m 列的二维数组矩阵.如图所示,以 ZIG-ZAG 方式打印此矩阵. 从对称的角度来看,通过反复施加滑行反射可以从简单的图案如线段产生规则的之字形. 主要思想:算法从(0, 0) ...