首页 >web前端 >css教程 > 正文

CSS 定位position属性详细介绍(附示例)

原创2019-08-15 18:14:510956
phpstudy集成环境下载
前言:在使用css给页面进行排版美化的过程中,经常会用到pposition属性。那么,接下来我们就详细介绍一下position属性。

推荐视频教程:css视频教程

首先,我们先写一个HTML文件,利用css实现多行内容垂直居中。

<div class="wrap">
    <div class="content">
    <h1>hello world</h1>
    <h2>HELLO WORLD</h2>
    <h3>层叠样式表</h3>
    </div>
</div>

接下来我们使用css进行布局排版:

.wrap{
width:100%;
height:400px;
display:table;
}
.content{
display:table-cell;
vertical-align:table;
text-align:center;
}

position属性:

、静态定位/常规定位/自然定位static

作用:使元素定位于自然流中

特点:

1、忽略top、bottom、left、right或者z-index声明

2、两个相邻的元素如果都设置了外边距,那么最终外边距=两者外边距中最大的

3、具有固定width和height值的元素,如果把左右外边距设置为auto,则左右外边距会自动扩大到占满剩余宽度,造成的效果就是这个块水平居中

二、 相对定位relative

作用:使元素成为可定位的祖先元素

特点

1、可以使用top/right/bottom/left/z-index进行相对定位,相对元素在自然流中的位置

2、相对定位的元素在自然流中的位置会被保留

3、任何元素都可以设置为relative,它的绝对定位的后代都可以相对于它进行绝对定位

4、可以使浮动元素发生偏移(解决两个浮动元素设置t/r/b/l无效的问题),并控制它们的堆叠顺序

三、绝对定位absolute

作用:使元素脱离自然流

特点

1、脱离自然流

2、设置尺寸的百分比比的是最近可定位的祖先元素

3、lrtb如果设置为0,它将对齐到最近可定位祖先元素的各边(衍生水平垂直居中妙计)

4、如果没有最近可定位祖先元素,会认作为可定位祖先元素

5、z-index可以控制堆叠顺序

四、 固定定位fixed

作用:和绝对定位作用相似

特点

1、相对于浏览器视口定位

2、固定定位元素不会随着视口滚动而滚动

3、继承absolue的特点

利用position实现子元素垂直居中

<div class="wrap">
    <div class=""content></div>
</div>
.wrap {
	width: 200px;
	height: 200px;
	background: blue;
	position: relative;
}
.content {
	width: 100px;
	height: 100px;
	background: red;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto auto;
}

以上就是CSS 定位position属性详细介绍(附示例)的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:position
  • 本文原创发布php中文网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • HTML/CSS技术小知识每日分享HTML/CSS技术小知识每日分享
  • HTML+CSS网页基础HTML+CSS网页基础
  • CSS 代码实例CSS 代码实例
  • CSS3 极速入门CSS3 极速入门
  • 视频教程分类