CSS:相对位置div内的绝对位置文本
也许更容易访问正在进行的网站 - http://www.roadsafetyforchildren.co.uk/
我想要将页面底部的黄色文本放置在蓝色条(这是一个 img
)上方。
我有一个具有 position:relative;
的 div,其中还有另一个具有 position:absolute;
的 div。我认为通过这样做,当您将 top
位置分配给绝对 div 时,它将以相对 div 的顶部作为起点?我的以屏幕顶部作为起点,因此占据了巨大的顶部位置。
显然,我希望黄色文本随蓝色条移动,具体取决于页面的高度/宽度。
据我所知,使用绝对位置是解决这个问题的唯一方法吗?
也许我不理解将绝对定位的 div 放在相对的 div 中的整个概念!
Maybe easier to the the site in progress - http://www.roadsafetyforchildren.co.uk/
I want to position the yellow text at the bottom of the page over the blue bar (which is an img
).
I have a div that has position:relative;
, within that is another div that has position:absolute;
. I thought by doing that when you assign a top
position to the absolute div it will take the top of the relative div as it's starting point? Mine takes the top of the screen as it's starting point, hence the massive top position.
Obviously I want the yellow text to move with the the blue bar depending how tall/wide the page is.
As far as I can see using position absolute is the only way to solve this?
Maybe I'm not understanding the whole notion of putting a absolute positioned div inside a relative one!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您的
#footer
div 是绝对定位的,但它不在任何相对定位的元素内。我看到的唯一相对元素是#actual-content
,它是#footer
的同级元素。如果您将绝对定位的元素放置在相对元素中,那么它的行为就像您所描述的那样。Your
#footer
div is absolutely positioned but it is not within any relatively positioned element. The only relative element I see is#actual-content
, which is a sibling of#footer
. If you place an absolutely positioned element WITHIN a relative element then it acts as you described.绝对定位的 div 必须位于相对定位的 div 内。您链接的网站上似乎并非如此。
The absolutely positioned div must be inside the relatively positioned div. That doesn't seem to be the case on the site you've linked.