max*_*ax_ 0 html css positioning
我不确定如何使用css定位元素,因为当我使用如下方法时,每当我调整浏览器大小时,元素都会保留在同一个位置,而不是我希望它们放在已调整大小的文档上.请你告诉我我做错了什么？!
.logo {
left: 20px;
top: 20px;
position: absolute;
}
#header h1 {
margin-top: 20px;
margin-left: 500px;
color: rgb(127, 127, 126);
line-height: 0px;
}
请小提琴 - http://jsfiddle.net/hHGRc/
Fuz*_*gic 14
在(X)HTML DOM中,CSS识别四种类型的定位.默认情况下,HTML中的每个元素都是静态定位的.这意味着它根据它在正常流程中出现的位置定位.
相对定位
当一个物体定位时relative,它意味着它根据原点修改位置,原点就是它在正常流动中定位的位置(静态).然而,相对也做了一些特殊的事情,并告诉浏览器它的所有子节点都将根据这个元素定位,无论是使用相对还是绝对.
绝对定位
当物体定位时absolute,它根据其最近的非static定位祖先的位置放置.如果没有,则使用它<body>来确定其位置.如果没有定位兄弟姐妹或祖先,这有可能打破文件流absolute.如果所有都absolute从最外面的顶部节点定位到当前节点,那么它将保持流量.
固定定位 这将元素从流中取出,并根据Window对象定位对象.这意味着无论文档的滚动状态,其大小或任何其他属性,它都将始终显示在该位置.(这就是你如何获得与你一起滚动的对象).
针对您的问题的多种解决方案
首先,如其他人所述,您可以添加position:relative到#header.如上所述,它将使您的标题成为最近的非static祖先,并将使用它和确定位置的基础.这对你来说可能并不理想,因为你是一个被录取的新手,这个人absolute很容易打破你可能会与兄弟元素斗争的流量.
作为替代方案,您可以将徽标更改position:absolute为position:relative.这会将您的徽标保留在流程中,但会根据文档流中自然出现的位置移动徽标.有可能除非你在你的#header中使用浮点数,这可能是你想要的,因为它a)保持流量,b)允许使用子元素floats而不会失去流量,c)实现理想的定位,d)保持从父元素继承(当它很重要时).
另一种选择是改变#header为position:absolute.但是,这可能会改变所有交互方式,除非您将所有父元素和兄弟元素都更改为position:absolute.此外,您可能无法访问祖先定义的宽度和高度,因为只有它们在同一个流中才会继承.这是您的第二个最佳情况,因为您可以简单地添加规则body * { position:absolute; },所有这些将保留在您的流程中.但是,它忽略了真正教你学习定位所需的东西,而只是一个拐杖.
希望这会有所帮助,FuzzicalLogic