CSS基础（五）：定位
CSS定位机制
CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。
相对定位
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。
只要box2设置了position为relative ，box1和box3始终不会因为box2的改变而改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>相对定位</title>
<style type="text/css">
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2
{
position: relative;
left: 20px;
top: 50px;
}
</style>
</head> <body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
1.当都不设置浮动时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
#main
{
border: 1px solid #000;
padding:10px;
}
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
</style>
</head>
<body>
<div id="main">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
2.当设置box1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了box1 2，使box12 从视图中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main
{
border: 1px solid #000;
padding:10px;
}
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
}
.box1
{
float:left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body>
</html>
3.当都设置为浮动时，box1 向左浮动直到碰到包含框，另外两个box向左浮动直到碰到前一个浮动框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>不设置浮动</title>
<style type="text/css">
#main
{
border: 1px solid #000;
padding:10px;
overflow: hidden;
}
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
margin:10px 0 0 30px;
float: left;
}
</style>
</head>
<body>
<div id="main">
<div class="box box1">box1</div>
<div class="box box2">box2</div>
<div class="box box3">box3</div>
</div>
</body>
</html>
4.清除浮动，要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
更多请参考
绝对定位
设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
当设置box2的position为absolute时，它就会脱离文档，相当于不存在。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>绝对定位</title>
<style type="text/css">
.box
{
width: 200px;
height:100px;
border: 1px solid #F00;
float: left;
margin:0 0 0 30px;
}
.box2
{
position: absolute;
left: 20px;
top: 50px;
}
</style>
</head> <body>
<div id="main">
<div class="box">box1</div>
<div class="box box2">box2</div>
<div class="box">box3</div>
</div>
</body>
</html>
CSS基础（五）：定位的更多相关文章
- CSS 基础：定位元素(3)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- CSS基础-4 定位
CSS定位和浮动 css定位:改变页面的位置 定位机制有以下三种 普通流 浮动 绝对布局 定位的属性: position:把元素放在一个静态的.相对的.绝对的.或固定的位置中 top ...
- css基础回顾-定位：position
w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...
- 第五模块：WEB开发基础 第1章·HTML&CSS基础
01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- css 基础 - 3
css 基础 - 3 20161128 一. 元素的距离计算 1,两个水平方向的容器s1,s2之间的距离计算为s: s = s1的margin-right + s2的margin-left(+默认 ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
随机推荐
- 实际遭遇并解决：类型“ASP.global_asax”同时存在的问题
将一个ASP.NET项目由预编译方式改为动态编译方式时,删除了bin文件夹中所有扩展名为.compiled文件以及文件名以App_Web_开头的文件. 访问却出现下面的错误: System.Web.H ...
- [游戏模版8] Win32 透明贴图
>_<:The same with previous introduction. In the InitInstance fanction make a little change: &g ...
- 亚马逊云服务之CloudFormation
亚马逊的Web Service其实包含了一套云服务.云服务主要分为三种: IaaS: Infrastructure as a service,基础设施即服务. PaaS: Platform as a ...
- [BTS] Deploy Command
BizTalkDeploymentTools.AddResource.bat @Echo OFF SET ApplicationName=%~1 SET ComponentType=%~2 SET C ...
- 修改Android签名证书keystore的密码、别名alias以及别名密码
Eclipse ADT的Custom debug keystore自定义调试证书的时候,Android应用开发接入各种SDK时会发现,有很多SDK是需要靠package name和keystore的指 ...
- Jsp技术总结
这节我们总结一下Jsp的相关技术. 1. 什么是JSP JSP即Java Server Pages,它和servlet技术一样,都是sun公司定义的一种用于开发动态web资源的技术.该技术的最大特点在 ...
- Leetcode 278 First Bad Version 二分查找（二分下标）
题意:找到第一个出问题的版本 二分查找,注意 mid = l + (r - l + 1) / 2;因为整数会溢出 // Forward declaration of isBadVersion API. ...
- Maven之问题解决汇总
Maven使用中,遇到的问题及解决办法记录下来 pom.xml顶部报错问题解决方法:http://stackoverflow.com/questions/5074063/maven-error-fai ...
- UHF桌面式发卡器
UHF桌面式发卡器: http://www.rr-rfid.com/index.php/pro_view/95 本文用菊子曰发布
- 三步解决EntityFramework Code First中的MissingMethodException错误
在数据库初始化时运行OnModelCreating的方法中,有时会抛出MissingMethodException异常. 以下三步可解决大部份的出错场景: 在程序包管理器控制台中运行:Uninstal ...