提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS中更加高级的布局手段——定位之绝对定位

定位CSS 高级 布局 更加 绝对 手段
2023-09-27 14:22:49 时间

定位：
        - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素

        - 通过position属性来设置元素的定位

                -可选值：

                        static： ['stætik] 默认值，元素没有开启定位

                        relative： ['relətiv] 开启元素的相对定位

                        absolute： ['æbsəlju:t] 开启元素的绝对定位

                        fixed：开启元素的固定定位（也是绝对定位的一种）

                        sticky： ['stiki] 开启元素的粘滞定位

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

        1.开启绝对定位，会使元素脱离文档流

        2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

        3.绝对定位是相对于离他最近的包含块定位的

        （一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）

        4.绝对定位会使元素提升一个层级

        5.绝对定位会改变元素的性质，开启BFC属性，内联元素变成行内块元素，块元素的宽度和高度默认都被内容撑开

包含块：containing block

        -正常情况下：离当前元素最近的祖先块元素

        -定位情况下：离他最近的开启了定位的祖先元素

                如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位，html （根元素，初始包含块）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: yellow;
				position: absolute;	
				left: 0px;
				top: 0px;
				bottom:0px
				
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: yellowgreen;
			}
			.inner{
				width: 300px;
				height: 300px;
				background-color: orange;
				/*开启inner的相对定位*/
				position: relative;
			}
			.outer{
				width: 400px;
				height: 400px;
				background-color: #ccc;
				/*开启outer的相对定位*/
				/* position: relative; */
			}
			
			.s1{
				/* width: 100px;
				height: 100px; */
				background-color: pink;
				
				/*开启绝对定位*/
				/* position: absolute; */
			}
			
		</style>
		
	</head>
	<body>
		
		<div class="box1"></div>
		<div class="outer">
			<div class="inner">
				<div class="box2"></div>
			</div>
		</div>
		
		<div class="box3"></div>
		
		<span class="s1">我是一个span</span>
	</body>
</html>

相关文章