CSS之position定位

最新推荐文章于 2022-10-17 01:02:28 发布

shandamengcheng

最新推荐文章于 2022-10-17 01:02:28 发布

阅读量216

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/shandamengcheng/article/details/104611088

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在CSS中，使用position属性可以改变元素的定位方式，其取值有以下几种：

static relative absolute fixed sticky
默认值为static，且适用于所有元素。

static 生成正常元素框，位于文档流中；行内元素会生成一个或多个行框随父元素流动
relative 相对于正常文本流中的位置偏移一定的距离，元素的大小，形状不发生变化。且原位置空间保留。
absolute 元素完全脱离正常文档流，相对于容纳块定位。原位置空间不复存在，好像这个元素没有出现过一样。不管什么类型的元素，定位后都是块级元素。
fixed 元素脱离文档流，相对于浏览器视口进行定位。
sticky 粘滞定位。元素初始时处于正常文档流中，当触发粘滞条件时，元素脱离文档流，不过位于文档流中的原位置得以保留。此时，相当于相对于容纳块绝对定位。当触发条件失效时，元素重新回到正常文档流。

容纳块

对于非根元素来说，position为static或relative，其容纳块为最近的块级、单元格或行内块级祖辈元素的内边界
对于非根元素来说，position为absolute,其容纳块为最近的position不为static的祖辈元素**（任何类型）**
- 容纳块是那个元素的内边距的边界，即由边框限定的区域
- 绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
对于position为sticky，容纳块的边界由粘滞限定矩形确定。粘滞定位就发生在这个矩形中。

偏移属性

当设置定位为relative, absolute, fixed, sticky时，可以加上偏移属性。

top right botton left
初始值：auto
top指定定位元素的上外边界（margin-top）距离容纳块的顶边多远。其他的同理。
**注意：**偏移属性是指定相对于容纳块相应的边的偏移距离。

宽高

定位元素可以设置宽高，但也不是强制要求，不设置宽高而只设置四个偏移属性也是可以的。

限制宽高

min-wdth max-width min-height max-height
通过使用极值属性可以灵活设置元素的宽高，但有一点，极值不能为负。

元素的可见性 visibility

取值： visible hidden collpse
要注意，visibility：hidden和display:none的区别：
前者表示，元素还在那里，只是你看不见，就像opacity:0那样。
后者表示，元素不显示，完全从文档中移除，但是元素仍在DOM中

绝对定位

绝对定位相对于容纳块进行位置确定。外边距的边界由偏移属性确定。绝对定位元素的容纳块为position不为static的祖元素（任何元素都可以）。

1. 绝对定位的位置和尺寸

通过偏移属性可以确定绝对定位元素的位置。如果没有设置元素的宽高，通过偏移属性也可以确定绝对定位元素的尺寸。

2. 自动确定边界的位置

绝对定位一个元素时，如果除了bottom外还有其他偏移属性被设置为auto,将得到一种特殊的行为。

.container {
			width:500px;
			height:500px;
			position: relative;
			border:1px solid blue;
		}
		.div {
			border:1px solid red;
			padding:20px;	
			width:300px;
			height:300px;
			/*margin:auto;*/
			position: absolute;
			top:20px;
			left:50px;
			right:50px;
			bottom:auto;
		}
		
<div class="container">
		<div class="div">计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计<span style="position: absolute;top:auto;left: 0">[4]</span>算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊
	</div>
	</div>

在这里插入图片描述
可以看到，top设置为auto后，最终出现在该行的最左侧。其实，span的顶部与当前行的行框的顶边的距离为0. 即，在这里，定位元素的顶边与没有定位时的顶边位置对齐。也就是说，先确定position为static时元素span的位置，然后根据这个位置计算定位后的顶变的位置。 关于静态位置，CSS中这样说：

"静态位置"基本指的是元素在常规文档流中的位置。更确切的说，静态位置的top值是容纳块的顶边距一个假想框上外边距边界的距离。

简单理解，就是元素的哪一边的偏移属性设置为auto,定位元素的那一边界与元素未定位时的边界所在的位置对齐

当left和top均为auto:
在这里插入图片描述
定位元素的左（右）边界与元素未定位时左（右）边界所在的位置对齐。
以上自动确定位置的机制只在特定情况下起作用，一般只要对定位元素无太多限定会使用。但是添加了宽高，其他的几个偏移属性，情况可能就不一样了。

<div class="div">计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计<span style="position: absolute;top:auto;right:auto;left:0;bottom:0;width:50px;height:50px">[4]</span>算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊计算机科学与技术啊
	</div>

在这里插入图片描述

非置换元素的位置和尺寸

对于定位元素而言：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 容纳块的宽度

如果left, right 和width都设置为auto, 元素左边界放在静态位置（从左到右书写语言），width为刚好容纳内容的大小，因此right为容纳块剩余空闲空间的计算值。
如果只把左右外边距设置为auto，left, right width均为确定值，则元素会居中显示，因为剩余的空闲空间的计算值将均分给margin-left和margin-right。

总之，记住上面的公式，对于设置为auto的属性，容纳块宽度减去所有确定值，根据剩下的值再进行计算，如果出现冲突，则会出现一些值的覆盖（修改它的值）。

z轴上的位置

对于定位元素，可以通过z-index来设置他们的堆叠方式。z-index值越大，元素离读者越近（即，在上小的元素上面，覆盖比他小的元素）。
设置了z-index后，元素就确立了自己的局部堆叠上下文。即，所有的后代元素的堆叠次序都是相对于祖辈元素而言的，不管子代元素的z-index多大，都不会超过父元素的范围。
CSS对于z-index的值为auto的说明：

生成的框体在当前堆叠上下文中的堆叠次序是0。如果不是根元素，不确定新的堆叠上下文。
因此，z-index可以视为z-index:0

固定定位fixed

fixed是相对于浏览器的视口进行定位的。
假如你想设置一个不会随着页面中的内容的滚动而滚动的导航条，就可以把这个导航条设置为fixed定位。

相对定位 relative

相对定位的唯一注意点就是:相对于正常文档流中的位置偏移，原位置空间保留。

粘滞定位sticky

未触发时，元素在文档流中，出发后，脱离文档流，原位置空间保留。

<!DOCTYPE html>
<html>
<head>
	<title>
		
	</title>
	<style type="text/css">
		.container 
		{
			width:300px;
			height: 300px;
			border:1px solid red;
			overflow: scroll;
		}
		h1 {
			position: sticky;
			top:30px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<h1>这是标题1</h1>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
		<div>计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机计算机</div>
	</div>
</body>
</html>

在这里插入图片描述

shandamengcheng

关注

0
点赞
踩
0

收藏

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

在CSS中，使用position属性可以改变元素的定位方式，其取值有以下几种：static relative absolute fixed sticky默认值为static，且适用于所有元素。static 生成正常元素框，位于文档流中；行内元素会生成一个或多个行框随父元素流动relative 相对于正常文本流中的位置偏移一定的距离，元素的大小，形状不发生变化。且原位置空间...
复制链接

扫一扫