记录--css定位

最新推荐文章于 2024-09-19 13:53:25 发布

wxt_

最新推荐文章于 2024-09-19 13:53:25 发布

阅读量141

点赞数 2

文章标签： css定位

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103281611

版权

css定位,关键词:position.使用top,bottom,left,right属性的属性值来设置元素的位置.

css有四种定位:

position: relative; 相对定位,相对于普通位置定位
position: absolute; 绝对定位,元素相对于position值不为static的第一位祖先元素来定位.
position: fixed; 固定定位,主要是以浏览器的窗口左上角为（0，0）开始定位,常用来制作广告窗口.
position: static; 静态定位,普通布局,默认值.

相对定位：不会让盒子脱离正常文档流

绝对定位：会让盒子脱离正常文档流

固定定位：会让盒子脱离正常文档流

<!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>03css定位2</title>
  <style>
	.parent{
        //子绝父相
		width: 600px;
		height: 600px;
		background-color: #ccc;
		margin: 50px auto;
		position: relative;
	}
	.parent>div{
		width: 100px;
		height: 100px;
	}
	.parent > div.red{
		background-color: red;
		
	}
	.parent > div.blue{
		background-color: blue;
		position: absolute;
		top: 100px;
		left: 100px;
	}
  </style>
 </head>
 <body>
	<div class="parent">
		<div class="son red">1</div>
		<div class="son blue">2</div>
	</div>
 </body>
</html>

子绝父相，不是绝对，父元素也可以用绝对，但是会让元素脱离正常文档流

上面的例子父元素.parent中的position值也可以是absolute,子元素一样可以相对父元素定位.

下面是一个固定定位的例子:

<!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>05css定位4</title>
  <style>
	.box{
		width: 100px;
		height: 500px;
		background-color: #ccc;
		
		/*固定定位，主要是以浏览器的窗口左上角为（0，0）开始定位.*/
		position: fixed;
		top: 70px;
		right: 50px;
	}
  </style>
 </head>
 <body>
 	<ol>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
		<li>这是参照物</li>
 	</ol>

	<div class="box"></div>
 </body>
</html>