频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS定位、CSS的position属性实例讲解
2018-02-13 14:29:22      个评论    来源:UTF-8的博客  
收藏   我要投稿

CSS的position属性

布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed,默认值为static。

static :默认文档流,正常显示;relative:相对定位;absolute:绝对定位;fixed:固定定位。

HTML代码:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>定位</title>  
    <script type="text/javascript" src="demo.js"></script>  
    <link rel="stylesheet" type="text/css" href="demo.css">  
</head>  
<body>  
    <p>1</p>  
    <p id="p2">2</p>  
    <p>3</p>  
    <p>4</p>  
</body>  
</html>  

css:

*{	
	margin: 0 ;
	padding: 0;
}
p{
	position: static;
	background: #ccc;
	margin-bottom: 15px;
}
#p2{
	position:relative;
	top: 20px;
	left: 20px;
}

1 将第二个p元素position属性设为(绝对定位) relative, 设置top和left值:

图示:

\

发现:第二个段落相对于原来的位置向下和右移动了20px。

结论:绝对定位的元素会相对于原来在文档流中的默认位置进行改变;并且这个元素不会影响其他元素,只是相对于自己原来的位置改变了。

PS:可以给top和left属性设定负值,把元素向上、向左移动。

2 将第二个p元素position的属性改为(相对定位)absolute,设置top和left值:

图示:

\

发现:第二个段落相对于浏览器窗口向下和右,移动了20px。且原来的位置被占据了。

结论:相对定位默认以body为参照物进行定位;并且相对定位已经脱离文档流, margin-bottom: 15px ;失效。

PS:如果给父元素的position属性设置了relative,则以父元素为参照物。如果父元素没有,则看父元素的父元素有没有,如果都没则以body为参照物。

3 将第二个段落position的属性改为(固定定位)fixed,设置top和left值:

发现与绝对定位相似,实际上fixed表示固定在body的某个位置不随页面的滚动而改变。

点击复制链接 与好友分享!回本站首页
上一篇:AngularJs使用ng-repeat实现数据循环展示的效果(代码教程)
下一篇:AngularJs使用ng-model-options设置数据同步时机提高网站性能(代码教程)
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站