css中的绝对定位

最新推荐文章于 2022-09-15 23:28:27 发布

xvzhengyang

最新推荐文章于 2022-09-15 23:28:27 发布

阅读量200

点赞数

分类专栏： html 前端 css 文章标签： css 绝对定位

本文链接：https://blog.csdn.net/xvzhengyang/article/details/86441207

版权

前端同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<!-- 1.绝对定位,脱离文档流,和浮动不同的是,内联元素不会围绕绝对定位元素 -->
		<!-- 2.绝对定位元素可以分层放置,若同一个位置上有多个绝对定位元素,可以有一个名为z-index的属性,
		 会指定它在一个虚拟z轴上的位置(上面的元素"更靠近你",z-index更大)-->
		 <!-- 3.position的默认值是static(静态).元素会放在正常的文档流中,由浏览器决定如何摆放 -->
		 <!-- 4.可以对任何元素指定绝对位置,包括内联元素和块元素,但是要记住,一个元素绝对定位的是会后,会把
		  它从页面的正常流中删除-->
		  <!-- 5.实际上position属性有四个值,static absolute fixed和relative;
		   固定fixed定位是将元素放在相对浏览器窗口的一个位置上(而不是相对页面)所以固定元素永远也不会移动;
		   相对定位relative,会让元素正常的流入页面,不过在页面上显示之前要进行偏移,相对定位常用语更高级的定位和特殊效果-->
		   <!-- 6.指定位置时,必须使用像素来指定吗?不,指定元素位置还有一种常用的方法,可以使用百分数;如果使用百分数
			,改变浏览器宽度时,元素的位置可能会改变,例如如果浏览器设置为800像素,元素的left为10%,那么元素就会放在距离
			浏览器窗口左边80像素的位置,如果浏览器调整为400像素,那么距离左边窗口就是40像素-->
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
			}

			div {
				height: 100%;
			}

			#allcontent {
				width: 800px;
				padding-top: 5px;
				padding-bottom: 5px;
				background-color: #675c47;
				margin-left: auto;
				margin-right: auto;
				position: relative;
			}

			#first {
				background-color: yellow;
				height: 10%;
			}

			#content {
				background-color: red;
				margin: 10px 0px 0px 0px;
				height: 80%;
			}

			#ad {
				background-color: blue;
				height: 600px;
				width: 200px;
				top: 100px;
				right: 10%;
				position: absolute;
				z-index: 100;
				/* 可以修改z-index的值,看小变化 */
			}

			#adTwo {
				background-color: black;
				height: 300px;
				top: 100px;
				right: 10px;
				position: absolute;
				z-index: 10;

			}

			#footer {
				background-color: #FFC0CB;
				height: 10%;
				/* 效果的话,可以注释 清除浮动 以及 添加浮动查看 */
			}
		</style>
	</head>
	<body>
		<div id="allcontent">
			<div style="background-color: #00FFFF;">
				<!-- 页眉 -->
				<div id="first">
					我是页眉
				</div>
				<!-- 广告区 -->
				<div id="ad">
					我是广告1
				</div>
				<!-- 广告区2 -->
				<div id="adTwo">
					我是广告2
				</div>
				<!-- 主内容 -->
				<div id="content">
					我是内容

				</div>

				<!-- 页脚 -->
				<div id="footer">
					我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚
					我是页脚我是页脚我是页脚我是页脚我是页脚我是页脚

				</div>
			</div>
		</div>
	</body>
</html>

xvzhengyang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css中的绝对定位

&lt;!-- 1.绝对定位,脱离文档流,和浮动不同的是,内联元素不会围绕绝对定位元素 --&gt; &lt;!-- 2.绝对定位元素可以分层放置,若同一个位置上有多个绝对定位元素,可以有一个名为z-index的属性, 会指定它在一个虚拟z轴上的位置(上面的元素"更靠近你",z-index更大)--&gt; &lt;!-- 3.position的...
复制链接

扫一扫