目录

10.5、CSS层模型--绝对定位position:absolute

2017年09月13日 08:00 | 28次浏览 | 分类: html+css教程 作者原创 版权保护

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。

如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;    position:absolute;
    left:100px;
    top:50px;}
<div id="div1"></div>

效果如下:


练习

新建示例页面demo.html,示例代码如下:

我来试一试:设置div标签相对于浏览器,(相对于以前位置右上角)向左移动100象素,向下移动20象素。

效果图如下:

示例代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>absolute样式</title>
<style type="text/css">
div{
    width:200px;
    height:200px;
	border:2px red solid;
	
    
    
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html><!--V型知识库www.vxzsk.com-->


此文章本站原创,地址 http://www.vxzsk.com/1412.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程