css样式定位属性之绝对定位的利用

绝地灬酷狼 2022-06-03 00:44 260阅读 0赞

### 利用css定位属性中的绝对定位positon:absolute对同一元素指定相对的偏移量属性可以暗示所需的尺寸大小  例如：  `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <style type="text/css"> body{ font:12px 宋体; background:lightyellow; } div.offset-four{ background:yellow; border:1px solid rgb("128,128,128"); position:absolute; top:20px; right:20px; bottom:20px; left:20px; } p{ margin:0; padding:5px; border:1px solid black; } p.offset-x{ position:absolute; bottom:5px; left:5px; right:123px; background:gold; } p.offset-y{ position:absolute; top:5px; right:5px; bottom:5px; width: 100px; background:khaki; } p.offset-copy{ border:none; margin-right:123px; } </style> </head> <body> <div class="offset-four"> <p class="offset-x">检方公诉书显示，自2002年以来，袁诚家、杜德福等人采取“以商养黑”“以黑护商”等非法手段将触角伸向辽宁本溪、鞍山和云南省香格里拉县的矿山开采、选矿加工、房地产开发、房屋建筑等经济领域，疯狂敛财、扩张资本，至案发前，总资产累计达20亿元。</p> <p class="offset-y">检方公诉书显示，自2002年以来，袁诚家、杜德福等人采取“以商养黑”“以黑护商”等非法手段将触角伸向辽宁本溪、鞍山和云南省香格里拉县的矿山开采、选矿加工、房地产开发、房屋建筑等经济领域，疯狂敛财、扩张资本，至案发前，总资产累计达20亿元。</p> <p class="offset-copy">检方公诉书显示，自2002年以来，袁诚家、杜德福等人采取“以商养黑”“以黑护商”等非法手段将触角伸向辽宁本溪、鞍山和云南省香格里拉县的矿山开采、选矿加工、房地产开发、房屋建筑等经济领域，疯狂敛财、扩张资本，至案发前，总资产累计达20亿元。</p> </div> </body> </html>`  分析：该html中应用css定位样式把文本通过绝对定位的方式设置了相关的尺寸大小，同时对此进行拓展，我们可以由此想到利用此种方式制作固定的页眉页脚和边栏，如下代码：  `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作固定的页眉页脚和边栏</title> <style type="text/css"> body{ background:pink; font:20px 宋体; margin:0; padding:0; } h1,div#footer{ position:absolute; right:0; left:0; background:white; margin:0; padding:5px; height: 20px; } div#footer{ bottom:0; font-size:20px; text-align:center; border-top:1px solid rgb(200,200,200); } h1{ top:0; font-weight:normal; font-size:18px; border-bottom:1px solid rgb(200,200,200); } div#left,div#right{ position:absolute; top:31px; bottom:31px; width: 200px; background:white; padding:5px; } div#left{ left:0; border-right:1px solid rgb(200,200,200); } div#right{ right:0; border-left:1px solid rgb(200,200,200); } div#container{ position:absolute; top:31px; right:21px; bottom:31px; left:211px; overflow:auto; padding:0 10px; line-height: 2em; } div#footer p{ margin:0; } </style> </head> <body> <h1>固定页眉</h1> <div id="left">左侧边栏</div> <div id="right">右侧边栏</div> <div id="container"> <p>对于舆论对袁诚家“黑老大”身份的关注，王殿学显得很淡然，“这都是依法提出的要求，<br>申请国家赔偿和当事人是不是‘黑老大’其实没有多大关系，而且这几年来中央在产权保护<br>领域也不断出台了新政策,只要是应该偿还的，就应该依法偿还。”</p> <p>王殿学律师向《中国经济周刊》记者介绍，按法院判决，当年被办案机关查封扣押的财产中<br>应该返还的主要包括被认定与黑社会犯罪无关的17家企业及其收益、袁诚家及家人账户和非<br>涉黑企业账户上的存款、包括银行入股金在内的对外投资款、袁诚家2003年黑社会性质组织<br>成立前的资产2000万元以及包括300箱茅台酒在内的物品</p> </div> <div id="footer"> <p>固定页脚</p> </div> </body> </html>`  在css入门经典中对此有着详细介绍，通过此可以对文本进行页眉页脚和边栏的格式设置，使页面美观化，文本格式正规化。 ###

利用此种方法，我们将其拓展化，可以将其在此基础上设置多栏情况，例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	body{
    		background:lightyellow;
    		font:20px 宋体;
    		margin:0;
    		padding:0 20px;
    	}
    	div#heading,div#container,div#footer{
    		border:1px solid black;/*加上边框防止设置外边距的时候发生父元素塌陷情况*/
    		max-width:1000px;
    		min-width:600px;
    		background:rgb(244,244,244);
    	}
    	div#container{
    		position:relative;
    		margin:0 auto;
    	}
    	div#heading{
    		margin:10px auto -1px auto;
    	}
    	div#heading h1{
    		margin:5px;
    	}
    	div#left{
    		position:absolute;
    		top:0;
    		bottom:0;
    		left:0;
    		width:200px;
    		background:rgb(234,234,234);
    		padding:5px;
    		border-right:1px solid black;
    	}
    	div#content{
    		margin-left:211px;/*200（宽度）+5*2（两个水平填充）+1（一个边框）=211*/
    		background:white;
    		border:1px solid white;
    		padding:10px;
    	}
    	div#footer{
    		margin:-1px auto 10px auto;
    	}
    	div#footer p{
    		margin:5px;
    		font:20px 宋体;
    	}
    	</style>
    </head>
    <body>
    	<div id="heading">
    		<h1>带有页眉和页脚的多栏布局</h1>
    	</div>
    	<div id="container">
    		<div id="left">左侧边栏</div>
    		<div id="content">
    			<h4>知识点分析</h4>
    			<p>在多栏布局中添加了页眉和页脚相当简单，只需要简单在左侧分栏留出空间，其他元素会各就各位。如此程序演示结果</p>
    			<p>在本例中有一些重要的概念需要了解，首先看页眉和页脚的样式。页眉和页脚元素中都包含了一个应用margin属性的元素。页眉中嵌套了应用margin属性的h1元素，其属性值为5像素，页脚中嵌套了margin属性的p元素，其属性值也是5像素。页眉和页脚也都有1个像素的黑色实线边框。这样做不仅仅出于美观原因，因为没有边框，嵌套元素的外边距和其父元素的外边距相互折叠。我们都知道，只要元素的上下外边距接触到父元素或者相邻元素的上下边距，就会发生外边距折叠。本例为了阻止外边距发生折叠，就需要为父元素——即id名为heading和footer的<div>元素添加边框。如果去掉边框，则会发生外边距折叠现象。</p>
    		</div>
    	</div>
    	<div id="footer">
    		<p>页脚位置</p>
    	</div>
    </body>
    </html>

绝对定位除了可以对文本加上页眉页脚和多栏格式外，还可以配合javascript制作弹出广告效果的网页，如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    	body{
    	background:lightyellow;
    	font:16px sans-serif;
    	width: 500px;
    	height: 1000px;
    	margin:0 auto;
    }
    div#dialogue{
    	position:absolute;
    	width: 200px;
    	height: 200px;
    	background:yellow;
    	border:1px solid gold;
    	top:50%;
    	left:50%;
    	margin:-56px 0 0 -106px;
    	padding:5px;
    }
    p{
    	margin:0;
    }
    	</style>
    </head>
    <body>
    id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条id名为dialogue的<div>的元素在浏览器的窗口里垂直和水平居中。看到该技术，您或许想知道这能否在宽度和高度变化的内容中实现，即id名为dialogue的<div>元素没有固定的宽度和高度。答案是否，应用此技术的元素必须要有固定的宽度和高度。但对于绝大多数情况下，这不是问题。因为可以允许内容溢出，如果有必要的话通过overflow属性提供滚动条
    	<div id="dialogue">
    		<p>利用此种绝对定位方法配合Javascript使用可以创建弹出式对话框，当然那些在屏幕上到处浮动的弹出式广告很令人讨厌。很遗憾的是，类似于这样的弹出式窗口也有很多合理之处，因此浏览器不能禁用他们</p>
    	</div>
    </body>
    </html>

![SouthEast][]

###        ###

[SouthEast]: /images/20220603/3eaad2991d4b4f159be33c617e5ec786.png