2019/9/06 H5 浮动（flaot）

最新推荐文章于 2021-06-04 04:00:07 发布

她她她_ta

最新推荐文章于 2021-06-04 04:00:07 发布

阅读量159

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_42243225/article/details/100594237

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动(float)

包裹性
向上性
不重叠

定位（position）

position : fixed;(固定定位：相对于浏览器定位)
position : relative;(相对定位：相对于该元素自身所在的位置定位)
position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)
position : static;(不定位)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			body{
				background-color:#bbb;
				height: 3000px;
			}
			.headerwrap{
				background-color: #fff;
				position: fixed;
				width: 100%;
				top:0
				/*bottom: 0;*/
				/*top: 100px;*/
			}
			.header{
				width: 1200px;
				height: 80px;
				margin: 0 auto;
				background-color: #fff;
			}
			.nav{
				float: right;
			}
			.nav li{
				float: left;
				margin-left: 20px;
				line-height: 80px;
				
			}
			.nav a:hover{
				color: blue;
			}
			.nav li a{
					color: black;
				}
				
			.logle{
				width: 150px;
			}
			li{
				list-style: none;
			}
			.goTop{width: 30px;
			height: 30px;
			border: 1px solid #ccc;
			background-color: #fff;
			color: blue;
			position: fixed;
			right: 0;
			top: 300px;
			font-size: 20px;
			text-align: center;
			line-height: 30px;
			cursor: pointer;
			
			}
			.goTop:hover{
				background-color: blue;
				color: white;
			}
			.rela{
				width: 100px;
				height: 100px;
				background-color: red;
				top: 100px;
				position: absolute;
			}
			.abso{
				width: 450px;
				height: 279px;
				margin: 0 auto 400px;
				border: 2px solid blue;
				position: relative;
				overflow: hidden;/*溢出处理*/
			}
			.abso p{
				width: 100%;
				height: 50px;
				position: absolute;
				bottom:-50px;
				background-color:  rgba(0,0,255,0.5);
				opacity:0.5;/*不透明度*/
				/*display: none;*/
				transition:1s;/*过度*/
			}
			.abso:hover p{
				/*display: block;*/
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<!--文档流：普通流/浮动流/定位流-->
		<div class="headerwrap">
		<div class="header">
			
			<img class="logle" src="https://www.baidu.com/img/bd_logo1.png">
			 <ul class="nav">
        	<li>
        		<a href="">百度首页</a>
        	</li>
        	<li>
        		<a href="">消息</a>
        	</li>
        	<li>
        		<a href="">日历</a>
        	</li>
        	<li>
        		<a href="">登录</a>
        	</li>
        	<li>
        		<a href="">注册</a>
        	</li>   	
        </ul>
		</div>
		</div>
		<div style="position: relative; height: 100px;margin-top:80px ;"
		<div class="rela">
			
		</div>
		<ul>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		<li>11</li>
		</ul>
		<div class="abso">
			<p>下课了</p>
			<img src="img/news.jpg">
		</div>
		<div class="goTop">
		</div>
	</body>
</html>

在这里插入图片描述

她她她_ta

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019/9/06 H5 浮动（flaot）

浮动(float)包裹性向上性不重叠定位（position）position : fixed;(固定定位：相对于浏览器定位)position : relative;(相对定位：相对于该元素自身所在的位置定位)position : absolute;(绝对定位：相对于该元素有定位属性的父元素去定位，如果父元素都没定位属性，相对于body定位)position : static;(不...
复制链接

扫一扫

专栏目录