HTML定位网页元素

快乐就好ya

于 2024-09-11 09:43:22 发布

阅读量300

点赞数 2

分类专栏： HTML 文章标签： html 前端 css html5 css3

本文链接：https://blog.csdn.net/m0_63233901/article/details/142128836

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

position属性

static：默认值，没有定位

relative：相对定位

absolute：绝对定位

fixed：固定定位

relative(相对定位）

相对于自身，有四个属性 top right left bottm

一般不自己使用，结合绝对定位一起使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>花样连接卡</title>
	</head>
	<link rel="stylesheet" href="css/index.css" />
	<body>
		<div class="zt">
			<div class="one">链接1</div>
			<div class="two">链接2</div>
			<div class="three">链接3</div>
			<div class="four">链接4</div>
			<div class="five">链接5</div>
		</div>
	</body>
</html>

.zt{
	width: 600px;
	height: 600px;
    border:red 1px solid ;
}
.one{
	width: 200px;
	height: 200px;
    border:red 1px solid ;
    background-color: #FF88FD;
    
}
.two{
	width: 200px;
	height: 200px;
    border:red 1px solid ;
    float:right ;
    position:relative ;
    bottom:200px ;
    background-color: #FF88FD;
}
.three{
	width: 200px;
	height: 200px;
    border:red 1px solid ;
    position:relative ;
    left:200px ;
    background-color: #FF88FD;
    
}
.four{
	width: 200px;
	height: 200px;
    border:red 1px solid ;
    background-color: #FF88FD;

}
.five{
	width: 200px;
	height: 200px;
    border:red 1px solid ;
    float: right;
    position:relative ;
    bottom:200px ;
    background-color: #FF88FD;
}
.one:hover{
	background-color: #0099FF;

} 
.two:hover{
	background-color: #0099FF;

} 
.three:hover{
	background-color: #0099FF;

} 
.four:hover{
	background-color: #0099FF;

} 
.five:hover{
	background-color: #0099FF;

} 
.one{
	color:white ;
	font-size: 20px;
	padding: 80px 70px;
	box-sizing:border-box ;
}
.two{
	color:white ;
	font-size: 20px;
	padding: 80px 70px;
	box-sizing:border-box ;
}

.three{
	color:white ;
	font-size: 20px;
	padding: 80px 70px;
	box-sizing:border-box ;
}
.four{
	color:white ;
	font-size: 20px;
	padding: 80px 70px;
	box-sizing:border-box ;
}
.five{
	color:white ;
	font-size: 20px;
	padding: 80px 70px;
	box-sizing:border-box ;
}

absolute(绝对定位）

相对于左上角，如果祖辈有相对定位或绝对定位，则是相对于祖辈

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link href="css/index02.css"rel="stylesheet" />
	<body>
		<div class="zt">
			<img src="img/adver-01.jpg" class="one"/>
			<img src="img/皇冠.png" class="two"/>
		</div>
		<div class="zt">
			<img src="img/adver-01.jpg" class="one"/>
			<img src="img/皇冠.png" class="two"/>
		</div>
		<div class="zt">
			<img src="img/adver-01.jpg" class="one"/>
			<img src="img/皇冠.png" class="two"/>
		</div>
		<div class="zt">
			<img src="img/adver-01.jpg" class="one"/>
			<img src="img/皇冠.png" class="two"/>
		</div>
		<div class="zt">
			<img src="img/adver-01.jpg" class="one"/>
			<img src="img/皇冠.png" class="two"/>
		</div>
	</body>
</html>

.zt{
	width: 200px;
	height: 200px;

	position: relative;
	float: left;
}
.one{
	width:80px ;
	height: 80px;
	padding-left:50px ;
	padding-top: 50px;
}
.two{
	position:absolute ;
	right: 30px;
	top:15px ;
}

fixed(固定定位）

常见于一键回到顶部，导航栏不动

div:nth-of-type(1) {  /*第一个div设置绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
 }
div:nth-of-type(2) {  /*第二个div设置固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
}

z-index

调整元素定位时重叠层的上下位置z-index属性值：整数，默认值为0

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>当当图书榜</title>
	</head>
	<link rel="stylesheet" href="css/index04.css" />
	<body>
		<div class="zt">
		<img src="img/logo.jpg" class="one"/>
		<img src="img/icon_count.png" class="two"/>
		<div class="three">唯品会 当当优品 数字馆 都看阅器</div>
		<div class="four">
			<ul>
				<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>				
			</ul>
		</div>
		<div class="five"><img src="img/banner.png" /></div>
		<div class="six">
			<img src="img/bg_bang.gif" class="seven">
			<img src="img/bookNo1.gif" class="eight"/>
			<img src="img/bookNo2.gif" class="nine"/>
			<img src="img/bookNo3.gif" class="ten"/>
			<img src="img/book-01.jpg"class="one"/>
			<img src="img/book-02.jpg"class="two"/>
			<img src="img/book-03.jpg"class="three"/>
			<div class="zj">
				<dl>
					<dt>偷影子的人 </dt>
					<dd>作 者：[法] 马克·李维（Marc Levy）著,段韵灵 译</dd>
					<dd>出版社：湖南文艺出版社</dd>
					<dd>当当价：<span >￥ 17.90</span></dd>
					<dd>不知道姓氏的克蕾儿。这就是你在我生命里的角色</dd>
					<dd>我童年时的小女孩，今日蜕变成了女人，一段青</dd>
					<dd>马的回忆，一个时间之神没有应允的愿望。 一个老是</dd>
					<dd>受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能</dd>
					<dd>力而强大：他能“偷别人的影子”，因而能看见他</dd>
				</dl>
			</div>
			<div class="zj1">
				<dt>看见(央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘 </dt>
				<dd>作 者：柴静 著</dd>
				<dd>出版社：广西师范大学出版社</dd>
				<dd><span>￥ 29.40</span> <span class="l">7.4折</span></dd>
			</div>
			<div class="zj2">
				<dt>改变孩子先改变自己 </dt>
				<dd>作 者：贾容韬 贾毅 著</dd>
				<dd>出版社：作家出版社</dd>
				<dd><span>￥ 22.20</span> <span class="l">7.4折</span></dd>
			</div>
		</div>
		<span class="xia">Copyright (C) 当当网 2004-2017, All Rights Reserved京ICP证041189号出版物经营许可证 新出发京批字第直0673号</span>
		</div>
	</body>
</html>

.zt{
	margin: 0 auto;
	width:2000px ;
	height:1100px ;

	position: relative;
}
*{
	padding:0 ;
	margin: 0;
}
.one{
	position:absolute ;
	top: 0;
	left: 0;
}
.two{
	position:absolute ;
	top: 0;
	right: 250px;
}
.three{
	width: 300px;
	height: 35px;
	background-color:#EAFFFA ;
	position: absolute;
	top: 20px;
	right: 0px;
	line-height: 35px;
	font-size:16px ;
	text-indent:10px ;
	word-spacing:10px ;
}
.four{
	background-color:#FE6915 ;
    width: 100%;
    height: 50px;
    position:absolute ;
    top: 60px;
}
.four li{
	float: left;
	list-style:none ;
	color:white ;
	font-size: 20px;
	margin-left: 70px;
	line-height: 50px;
}
li:hover{
	text-decoration:underline ;
}
.five{
	width:100% ;
	height: 120px;
	position: absolute;
	left: 0;
	top:120px ;
}
.five img{
	width: 100%;
	height: 100%;
}
.six{
	height: 720px;
	width:2000px ;
	border: 1px solid #8EC758;
	position:absolute ;
	bottom: 100px;
}
.seven{
	position: relative;
	top: 20px;
	left:-10px ;
}
.eight{
	position:absolute ;
	top: 100px;
	left:30px ;
	z-index: 1;
}
.nine{
	position:absolute ;
	top: 140px;
	right:470px ;
	z-index: 1;
}
.ten{
	position:absolute ;
	top: 350px;
	right:470px ;
	z-index: 1;
}
.six .one{
	position:absolute ;
	top: 105px;
	left:15px ;
	
}
.six .two{
	position:absolute ;
	top: 150px;
	right:400px ;
	
}
.six .three{
	position:absolute ;
	top: 350px;
	right:400px ;
    width:100px ;	
    height: 100px;
	
}
.zj{
	height: 400px;
	width:400px ;

	position: absolute;
	bottom: 200px;
	left: 300px;
}
 dt{
	line-height: 40px;
	color: #ABC7E3;
}
dd{
	line-height: 25px;
}
span{
	color: #E2B19C;
	font-weight: bold;
}
.zj1{
	height: 200px;
	width: 400px;

	position:absolute ;
	bottom: 370px;
	right:0px ;
}
.zj2{
	height: 200px;
	width: 400px;

	position:absolute ;
	bottom: 150px;
	right:0px ;
}
.l{
	color: #96CA64;
}
.xia{
	position:absolute ;
	bottom: 20px;
    left: 500px;
	color: #9C989C;
}

网页元素透明度

opacity:x	x值为0~1，值越小越透明	opacity:0.4;
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40);

快乐就好ya

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML定位网页元素

设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系。调整元素定位时重叠层的上下位置z-index属性值：整数，默认值为0。相对于自身，有四个属性 top right left bottm。相对于左上角，如果祖辈有相对定位或绝对定位，则是相对于祖辈。z-index值大的层位于其值小的层上方。一般不自己使用，结合绝对定位一起使用。static：默认值，没有定位。常见于一键回到顶部，导航栏不动。relative：相对定位。absolute：绝对定位。fixed：固定定位。
复制链接

扫一扫