首页 > 开发 > CSS > 正文

css基础教程之定位方法:绝对定位、相对定位、fixed和

2024-07-11 08:40:54
字体:
来源:转载
供稿:网友
通过几段案例代码,让您了解CSS的绝对定位、相对定位、fixed和static几种方法

以下讨论的是和定位 绝对定位 相对定位 fixed static 相关的css基础教程之定位方法:绝对定位、相对定位、fixed和static教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

1.绝对定位(absolute):脱离原来位置进行定位,可以使用left right top bottom进行定位

html代码

<!DOCTYPE html><html lang="en"><head>	<meter charset="utf-8">	<title>hhhh</title> 	<link rel="stylesheet" type="text/css" href="lesson3.css"></head><body>	<p class="demo"></p>	<p class="box"></p></body></html>

css代码:

*{	margin:0;	padding:0;}.demo{	position:absolute; 	/*top:100px;	left:100px;*/	width: 100px;	height: 100px;	background-color: red;	opacity: 0.5;     /*透明度*/}.box{	width:150px;	height:150px;	background-color: green;}

2.相对定位(relative):保留原来位置进行定位,可以使用left right top bottom进行定位

html代码:

<!DOCTYPE html><html lang="en"><head>	<meter charset="utf-8">	<title>hhhh</title> 	<link rel="stylesheet" type="text/css" href="lesson3.css"></head><body>	<p class="demo"></p>	<p class="box"></p></body></html>

css代码

*{	margin:0;	padding:0;}.demo{	position:relative; 	/*top:100px;	left:100px;*/	width: 100px;	height: 100px;	background-color: red;	opacity: 0.5;     /*透明度*/}.box{	width:150px;	height:150px;	background-color: green;}

3.fixed:相对于浏览器的窗口对元素进行定位,可以使用left right top bottom进行定位

4.static:默认值,没有定位,top left 等不起作用

注意:存在父子元素使用定位时

absolute: 相对于最近的有定位的父级进行定位,要是没有最就相对文档进行定位
relative:相对于自己原来的位置进行定位

通常情况下,我们使用relative作为参照物,使用absolute进行定位

例如:

<div class="wrapper">    <div class="demo">            <div class="box"></div>    </div></div>

若使box参照demo进行定位则

*{	margin:0;	padding:0;}.wrapper{	margin-left: 100px;	width: 200px;	height: 200px;	background-color: orange;}.demo{	position:relative; 	margin-left: 100px;	width: 100px;	height: 100px;	background-color: red;	}.box{	position:absolute;	left: 50px;	width:50px;	height:50px;	background-color: green;}

css基础教程之定位方法:绝对定位、相对定位、fixed和static文章就讲到这里,欢迎浏览本站的其它内容,点击这里返回首页

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表