css - 社交媒体按钮定位

Question

您如何在内容 div 的一侧放置社交媒体按钮？
喜欢这里：http ://adidasgolf.eu/home.aspx

绝对定位？但是内容 div 也必须绝对定位，对吗？到目前为止，这就是我所拥有的……没有社交媒体按钮。

http://www.swiftgeckotech.com/golf01.html

谢谢。

Answer 1

内容 div 的定位不是绝对与社交图标一起使用。您可以自由地在内容 div 中保持正常布局，并将社交图标放在内容 div 之外，并绝对定位它们。您可能还需要进行一些 z-indexing 才能获得分层效果。

Answer 2

您最有可能想要使用position: relative;的内容DIV。将内容设置DIV为position: absolute;或者position: relative;将为子元素的定位建立一个新的原点......请参阅this fiddle以快速演示绝对定位元素在另一个定位元素中的行为。

但是，从文档流中删除的元素position: absolute;......它们在页面上推送其他内容方面没有“实质”。DIV由于position: absolute;这个原因，您很可能不想设置您的内容。如果您在那之后添加更多内容DIV，它不会像预期的那样位于页面底部，而是最终位于绝对定位的内容后面DIV。position: relative;然而，它将按预期工作，并将为您提供一个新的坐标系，以将您的社交媒体按钮绝对定位到它的一侧。