在css中使用position:absolute、position:relative、position:fixed和position:static情况下
在css中使用position:absolute、position:relative、position:fixed和position:static情况下
提问于 2014-11-15 12:21:02
我刚开始使用html5和css，我对css的位置有一点困惑。
我可以从堆栈溢出中找到这些链接，
Difference between relative and absolute
Position absolute but relative to parent
我仍然不能解决，我需要知道所有的位置属性的例子，在哪种情况下必须使用哪个位置属性来开发网页。
先生，您能帮我吗？
任何帮助都将不胜感激。提前谢谢。
回答 1
Stack Overflow用户
发布于 2015-01-19 19:27:38
.parentClassDiv{
position:relative;
border-color:red;
border-radius:4px;
border-style:solid;
height:150px;
top:100px;
}
.relativeClass{
position:relative;
border-color:green;
border-radius:4px;
border-style:solid;
top:80px;
left:30px;
}
.absoluteClass{
position:absolute;
border-color:blue;
border-radius:4px;
border-style:solid;
top:120px;
}
.fixedClass{
top:30px;
position:fixed;
border-color:yellow;
border-radius:4px;
border-style:solid;
left:10px;
}
.staticClass{
top:10px;
left:10px;
position:static;
border-color:brown;
border-radius:4px;
border-style:solid;
}<html>
<head>
<title>difference b/w relative,absolute,fixed,static</title>
</head>
<body>
<div class='parentClassDiv'>
<span class='relativeClass'>hello..I am relative..positioned top-40px and left:30px..relative to my parent div(red color)</span>
<span class='absoluteClass'>hello..I am absolute</span>
<span class='fixedClass'>hello..I am Fixed..I will be positioned from the page top(i.e:it parent always be html tag)</span>
<span class='staticClass'>I am Static.even top is 100px.i will be positioned on my place in my parent tag(red color).i will not take top,bottom,left,right.and also i started here only because green color is relative (reserved it place and moved to bottom)</span>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26942504
复制相关文章
相似问题
腾讯云开发者
