文档章节

07/24 CSS中position总结

Winnie007
 Winnie007
发布于 2016/07/27 20:07
字数 1030
阅读 25
收藏 1

我们常常使postion用于层的定位,有时一个布局中有几个小对象,不易用css padding  margin进行定位,这个时候我们就可以使用position的absolute、relative(绝对定位、相对定位)来轻松搞定。特别是一个盒子里有几个小盒子不规律的布局,这个时候使用position定位非常方便布局。

一、postion语法:

position:static absolute relative

static:无特殊定位,对象遵循html定位规则。

absolute: 将对象从文档流中拖出,使用left、right、top、bottom等属性相对于其最接近的一个具有定位设置的父对象进行绝对定位。如果不存在这样的对象,则依据body对象。而其层叠通过z-index属性来设置。如果没有设置left、right、top、bottom,那么会将使用它默认的属性,将遵从正常的html布局的规则来进行布局。

relative:relative会保持对象在正常的html流中,生成相对定位,相对于其正常位置进行定位,left:20,会向元素的left位置添加20px。在相对定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。top、right、bottom、left的值设置为正值时,元素向内收缩,设置为负值时,向外扩张。

 

二、position的实际用处

 绝对定位position用于定位盒子对象,有时一个布局中几个小对象,不易用css padding 、css margin进行相对定位,这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局。类似这种的

三、绝对定位使用条件

position:absolute。绝对定位使用通常是父级定义position:relative定位,子级定义position:absolute绝对定位属性,并且子级使用left或right或top或bottom进行绝对定位。

四、绝对定位案例:

如图:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<style type="text/css">
		*{margin:0px; padding:0px;}
		body{
			font-size:14px;
		}
		ul{list-style:none;}
		a{list-style:none; text-decoration:none; color:#fff;}
		a:hover{
			color:red;
			cursor:pointer;
		}
		ul{margin-top:10px;}
		ul li{line-height:1.5em;}
		#wrapper{
			width:610px;
			height:559px;
			margin:0px auto;
			background:url(bg.jpg) no-repeat;
			position:relative;
		}
		.box1{
			width:156px;
			height:134px;
			position:absolute;
			left:198px;
			top:16px;
			font-size:12px;
			color:#fff;
		}
		.box2{
			width:156px;
			height:134px;
			position:absolute;
			left:24px;
			bottom:67px;
			
		}
		.box2 ul{
			margin-left:5px;
		}
		.box3{
			width:156px;
			height:134px;
			position:absolute;
			right:5px;
			bottom:115px;
		}
		
		h3.title{height:32px; line-height:32px; font-size:bold; text-align:left;}
	</style>
</head>

<body>
	<div id="wrapper">
		<div class="box1">
			<h3 class="title">新闻动态</h3>
			<ul>
				<li><a href="#">不会程序能学会CSS吗?</a></li>
				<li><a href="#">DIVCSS学习难吗?</a></li>
				<li><a href="#">我要参加DIVCSS5的培训</a></li>
				<li><a href="#">我要参加DIVCSS5的培训</a></li>
				<li><a href="#">jQuery所以版本集合整理</a></li>
			</ul>
		</div>
		<div class="box2">
			<h3 class="title">DIVCSS5栏目</h3>
			<ul>
				<li><a href="#">CSS基础教程</a></li>
				<li><a href="#">HTML基础教程</a></li>
				<li><a href="#">CSS问题</a></li>
				<li><a href="#">CSS制作工具</a></li>
				<li><a href="#">DIV CSS技巧</a></li>
				<li><a href="#">DIV+CSS+JS特效</a></li>
			</ul>
		</div>
		<div class="box3">
			<h3>网站栏目</h3>
			<ul>
				<li><a href="#">DIV CSS入门</a></li>
				<li><a href="#">HTML入门教程</a></li>
				<li><a href="#">CSS问题</a></li>
				<li><a href="#">CSS制作工具</a></li>
				<li><a href="#">DIV CSS技巧</a></li>
				<li><a href="#">DIV+CSS+JS特效</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

五、css绝对定位总结

我们使用position:absolute;position:relative进行绝对定位,通过css进行定义定位,注意什么地方使用position:relative,什么地方使用position:absolute进行定位,同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative ,或者使用position:absolute进行定位,这个时候会以body为父级。

在绝对定位时候我们可以使用z-index定义层重叠顺序。

同时left、right、bottom、top的值,可以使用ps切片工具获取准确数值。

© 著作权归作者所有

Winnie007
粉丝 7
博文 36
码字总数 62847
作品 0
青岛
私信 提问
浅谈line-height

基础知识 有4种模型,分别是 块,块盒模型 containing boxing,包括 行内盒模型 inline boxing ,包含 行模型 line boxing,包含,高度是由最高的元素决定. 内容区域 content area 这部分内容可以...

小王JOJO
2016/07/06
106
0
mysql逻辑备份 mysqldump

MySQL逻辑备份mysqldump 是我们平时用的比较多的备份方式,那么myqldump的备份原理是什么?是如何保证备份数据一致性的呢?为了观察mysql在逻辑备份mysqldump 的时候,究竟做了哪些操作,我们...

雪隐千寻
2017/12/11
0
0
前端——CSS绝对定位、相对定位和文档流

前言 http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html 接触html、和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用d...

fycool
2016/11/17
25
0
CSS定位及文档流

今天看到一个面试题问哪种css的属性不会让div脱离文档流,答案有position分别是relative,abosolute,fixed及float的选项 当时看到题不是太明白什么是文档流,查了下normal flow,其实就是h...

王小明123
2016/08/10
45
0
js关于一个效果放大镜的效果显示问题

当打开浏览器第一次点击的时候,点击显示下一张图,那个相对应的大图位置有问题,当点过几次后就不会了,我要怎么在点击的时候就算好大图相对应的位置呢 谁能帮我修正下 ------------------...

123456qweqwe
2015/01/08
1K
3

没有更多内容

加载失败,请刷新页面

加载更多

分页查询

一、配置 /*** @author beth* @data 2019-10-14 20:01*/@Configurationpublic class MybatisPlusConfig { @Bean public PaginationInterceptor paginationInterceptor(){ ......

一个yuanbeth
昨天
5
0
在LINQPad中使用Ignite.NET

LINQPad是进行.NET开发的一款优秀工具,非常有利于Ignite.NET API的快速入门。 入门 下载LINQPad:linqpad.net/Download.aspx,注意要选择64位操作系统的AnyCPU版本; 安装Ignite.NET的NuGet...

李玉珏
昨天
6
0
JS其他类型值转化为Boolean类型规则

本文转载于:专业的前端网站➤JS其他类型值转化为Boolean类型规则 由于最近在笔试的时候,发现好多关于其他类型转化为Boolean类型的题目,因此总结一下! 一、String类型转化为Boolean 1.转化...

前端老手
昨天
6
0
EurekaClient自动装配及启动流程解析

在上篇文章中,我们简单介绍了EurekaServer自动装配及启动流程解析,本篇文章则继续研究EurekaClient的相关代码 老规矩,先看spring.factories文件,其中引入了一个配置类EurekaDiscoveryClie...

Java学习录
昨天
10
0
析构函数是否必须为虚函数?为何?

p517 在C++中,基类指针可以指向一个派生类的对象。如果基类的析构函数不是虚函数,当需要delete这个指向派生类的基类指针时,就只会调用基类的析构函数,而派生类的析构函数无法被调用。容易...

天王盖地虎626
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部