定位 (position)

最新推荐文章于 2022-03-31 22:32:54 发布

BuKaiXIu

最新推荐文章于 2022-03-31 22:32:54 发布

阅读量349

点赞数

分类专栏： HTML+CSS 文章标签： html+css

本文链接：https://blog.csdn.net/weixin_41539580/article/details/84261550

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定位 (position)

元素的定位属性

元素的定位属性主要包括定义模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相当于其父元素左边线的距离

也就是说，以后定位要和这偏移量配合使用，比如 top: 100px; left: 30px;等等

2、定位模式

在css中，position属性用于定义元素的定位模式，其基本语法格式如下:

选择器{position: 属性值;}

position属性的常用值

值	描述
static	自动定位(默认的定位方式)
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行
flxed	固定定位，相对于浏览器窗口进行定位

position: static（静态定位）

静态定位（默认值）

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态定位，所谓静态位置就时各个元素在HTML文档流中默认的值。

白话：就时网页中所有元素都默认的是静态定位哦！其实就是标准流的特性。

在静态定位状态下，无法通过边偏移属性来改变元素的位置。

position: relative（相对定位）

相对定位（自恋型）

相对定位是将元素相对于在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但它在文档流中的位置依然保留。

注意：

1、相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来占有的位置，继续占有。

2、其次，每次移动位置，是以自己的左上角为基点移动（相对于自己来移动位置），就是说，相对定位的盒子仍然在标准流中，它后面的盒子仍然以标准流方式对待它。（相对定位不脱标）。

如果说浮动的目的是让多个块级元素在一行显示，那么定位的主要价值就是移动位置，让盒子到我们想要的位置上去。

相对定位占有位置是不脱标的。

position: absolute（绝对定位）

绝对定位（拼爹型）

绝对定位的元素的位置相对于最近已经定位的父级元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

绝对定位是完全脱标的，不占有位置（漂起来的）。

绝对定位父亲没有定位，孩子以浏览器为基准点对齐。

绝对定位父亲又定位，孩子以最近的带有定位的父级为基准点对齐（absolute和relative都可以）。

子绝父相

如果给父亲加绝对定位影响布局，所以给父级加相对定位。

父亲加相对定位，孩子加绝对定位，最好。

定位的盒子水平居中

加了绝对定位过的盒子margin: 左右 auto;不起作用。

定位盒子的水平居中的算法

1、先让子盒子走父盒子的width的一半及left: 50%;。

2、再让子盒子向反方向走自己宽度的一半（外边距margin-left: 负的自身一半;）。

定位的盒子垂直居中

1、先让盒子走父级盒子的height一半及top: 50%;

2、在让子盒子向反方向走自身height一半（margin-top: 负的自身一半;）。

相对定位于绝对定位的使用

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{
		margin: 0;
		padding: 0;
	}
	.da {
		width: 800px;
		height: 400px;
		background-color: #000;
		border: 1px solid #ccc;
		margin: 20px auto;
		position: relative;
	}
	.xiao {
		width: 800px;
		height: 400px;
	}
	.da a{
		display: inline-block;
		width: 64px;
		height: 64px;
		background-color: rgba(0,0,0, .3);
		position: absolute;
		top: 50%;
		margin-top: -32px;
	}
	.l {
		left: 0;
	}
	.r {
		right: 0;
	}
	ul {
		width: 140px;
		height: 20px;
		background-color: rgba(255,255,255, .4);
		position: absolute;
		bottom: 10px;
		left: 400px;
		margin-left: -70px;
		border-radius: 20px 20px;
		line-height: 20px;
	}
	ul li{
		list-style: none;
		float: left;
		height: 10px;
		width: 10px;
		background-color: rgba(255,255,255, .5);
		margin:5px;
		border-radius: 50%;
		
	}
      .current {
          background-color: #f10215;
      }
  </style>
 </head>
 <body>
	<div class="da">
		<img src="1.jpg" class="xiao" alt="">
		<a href="1.png" class="l"><img src="1.png" alt=""></a>
		<a href="2.png" class="r"><img src="2.png" alt=""></a>
		<ul>
			<li class="current"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	
 </body>
</html>

position: fixed（固定定位）

固定定位（认死理型）

固定定位是绝对定位的一种特殊形式，类似于正方形是一个特殊的矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的位置，不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化，该元素都会始终显示在浏览器窗口固定的位置。

固定定位有两点：

1、固定定位的元素和父级元素没有任何关系，只认浏览器。

2、固定定位完全脱标，不占有位置，不随滚动条滚动。

1e6等低版本浏览器不支持固定定位。

固定定位案例：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{
	margin: 0;
	padding: 0;
	
	}
	ul,a{
		list-style: none;
		text-decoration: none;
	}
	.w{
		width: 50%;
		margin: 0 auto;
	}
	nav{
		width: 100%;
		height: 41px;
		background: #FCFCFC;
		border-top: 3px solid #FF8500;
		border-bottom: 1px solid #edeef0;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
	}
	nav a{
		display: inline-block;
		height: 41px;
		line-height: 41px;
		font-size: 14px;
		color: #4c4c4c;
		text-decoration: none;
		padding: 0px 15px;	
	}
	nav a:hover{
		background: #eee;
	}
	.zx{
		height: 2000px;
		background-color: skyblue;
		margin: 45px auto;
		position: relative;
	}
	.new{
		position: absolute;
		left: 50%;
		top: 200px;
		margin-left: -119px;
		height: 294px;
		width: 238px;
		border: 1px solid #D9E0EE;
		border-top:3px solid #FF8400;
	}
	h3{
		height: 35px;
		font-size: 16px;
		font-weight: normal;
		line-height: 35px;
		border-bottom: 1px solid #d9e0ee;
		padding-left: 12px;
	}
	.new img{
		width: 220px;
		height: 160px;
		margin: 7px 0 0 9px;	
	}
	.new ul{
		margin-left: 8px;
	}
	.new ul li{
		padding-left: 12px;
		line-height: 26px;
		background: url("1.png") no-repeat left center;
		background-size: 5px 5px;
	}
	.new ul li a{
		font-size: 12px;
		color: #666;
	}
	.cebian{
		position: fixed;
		margin: 40px 100px;
	}
	.cebian ul li{
		height: 50px;
		width: 100px;
		line-height: 50px;
		font-weight: 400;
		font-size: 18px;
		text-align: center;
		border-radius: 10%;
		cursor: pointer;
	}
	.cebian ul li:hover{
		background-color: #f10215;
		color: #fff;

	}
	.cebian .c_red{
		background-color: #f10215;
		color: #fff;
	}
  </style>
 </head>
 <body>
	<nav>
		<div class="w">
			<a href="">首页</a>
			<a href="">手机新浪网</a>
			<a href="">网站导航</a>
			<a href="">三个字</a>
		</div>
	</nav>
		<div class="cebian">
		<ul>
			<li class="c_red">热门</li>
			<li>头条</li>
			<li>视频</li>
			<li>新鲜事</li>
			<li>榜单</li>
			<li>搞笑</li>
			<li>创意</li>
			<li>社会</li>
			<li>工艺</li>
			<li>健身</li>
			<li>时尚</li>
			<li>电影</li>
		</ul>
	</div>
	<div class="w zx">
		<div class="new">
			<h3>搜素趣图</h3>
			<img src="3f.jpg" alt="">
			<ul>
				<li><a href="#">你好明天 会更好</a></li>
				<li><a href="#">你好明天 会更好</a></li>
				<li><a href="#">你好明天 会更好</a></li>
			</ul>
		</div>
	</div>
 </body>
</html>

z-index（叠放次序）

当多个元素同时设定时，定位元素之间有可能会发生重叠。

在css中想要调整重叠定位元素的堆积顺序，可以对定位元素应用z-index，层叠等级属性其取值可为正整数，负整数和0。

注意：

1、z-index的默认值属性为0，取值越大，定位元素在层叠元素中越居上。

2、如果取值相同，则根据书写顺序，后来者居上。

3、后面数据一定不能加单位。

4、只要相对定位，绝对定位，固定定位，才有此属性，其余标准流，浮动，静态定位都没有此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置的基准
静态定位static	不脱标，正常模式，占有位置	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身的位置
绝对定位absolute	脱标，不占有位置	可以	相对于定义父级元素移动位置
固定定位fixed	脱标，不占有位置	可以	相对于浏览器移动位置

定位模式

和浮动一样，元素添加了绝对定位和固定定位之后，元素模式也发生转换，都转化为，行内块模式。

因此，比如说行内元素如果添加了绝对定位或固定定位和浮动后，可以不用转化模式，直接给高度和宽度就可以了。

元素的显示于隐藏

display 显示

display 设置或检索对象是否及如何显示。

display: none;隐藏对象，与它相反的是display: block;除了转化为块级元素外，同时还有显示元素的意思。

特点：隐藏后，不在保留位置

visibility 可见性

设置元素或检索是否显示对象。

visible：对象可视。

hidden：对象隐藏。

特点：隐藏之后，继续保留原有位置。

显示案例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		div {
			height: 50px;
			width: 50px;
			margin: 100px auto;
			background-color: #000;
			position: relative;
		}
		div img{
			position: absolute;
			left: 50px;
			top: 50px;
			display: none;
             /*visibility: hidden;*/
		}
		div:hover img{
			display: block;
            /*visibility: visible;*/
		}
	</style>
 </head>
 <body>
  <div>
	<img src="3f.jpg" width="100px" height="100px" alt="">
  </div>
 </body>
</html>

overflow 溢出

检索或设置当前对象的内容超过其指定高度及宽度时如何管理内容。

visible：默认值，不剪切内容也不添加滚动条。

auto：超出自动显示滚动条，不超出不显示滚动条。

hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉。

scroll：不管超出内容否，总是显示滚动条

BuKaiXIu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
定位 (position)

定位 (position)元素的定位属性元素的定位属性主要包括定义模式和边偏移两部分。1、边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离right右侧偏移量，定义元素相对于其父元素右边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相当于其父元素左边线的距离也就是说，...
复制链接

扫一扫