【问题标题】:How to place Div below my iFrame video如何将 Div 放在我的 iFrame 视频下方
【发布时间】:2016-08-12 15:22:54
【问题描述】:

我目前有一个 iframe 视频,上面有 4 个可点击的图片。在此之下,我想有一个联系我页面,但是,我面临的问题是如何让我的联系我 div 破坏 iframe 视频。有人可以帮我解决这个问题吗?目前,在我的 codepen 上,你会看到我已经应用了一个线性渐变,这是放置视频的位置,即使我有一个 Contact Me div,它也没有放在左上角,后面iframe 视频,我希望它位于 div 下方,与它完全分开。

你可以在我的 Codepen 上看到我的代码,here

这就是我目前拥有的:

.

从屏幕截图中可以看出,这是首页,但“联系我”的 div 位于视频后面,在顶角...有人可以帮我解决这个问题吗?

【问题讨论】:

    标签: html css video iframe


    【解决方案1】:

    绝对定位的元素太多。你不需要所有这些。 要将元素相对于其父元素进行绝对定位,您只需将 position: relative 添加到 parent 并将 position: absolute 添加到孩子

    而且由于您对所有内容都进行了绝对定位,因此元素正在失去其高度,这就是为什么您的联系人 div 移动到顶部的原因,因为页面的流程被破坏了,因此,您的联系人 div 并没有真正看到上面的元素它。另外,您在正文上有 color: white,这适用于您页面上的所有内容,包括联系人 div。更改它,您会在标题顶部找到您的联系人。

    如果您需要更多信息,我很乐意提供帮助。

    【讨论】:

    • 感谢您的回复。那么,为了解决这个问题,我应该改变哪些?因为我不太确定哪些要离开,哪些要改变,谢谢你的帮助!我已将颜色更改为蓝色或其他颜色以使其更易于查看,但仍然不知道在哪里放置什么
    • 你可以这样做。我剥离了 html 样式并重新做了几乎所有与您的问题相关的事情。我也重新排列了一些html。在这里查看。 link
    • 天哪,你解决了吗?!非常非常感谢你!我还以为你改了呢,现在好像有什么结构啊!
    • 不客气。下次尝试使用版本控制(Git)它会帮助你解决这样的问题。几乎每次都返回几步会有帮助。
    【解决方案2】:

    您的联系人标题在那里。它在左上角,但它是白色的(至少这是我在代码链接上看到的)给<h1> 一个样式颜色以帮助使其脱颖而出,<h1 style="color:blue;"> 等。还将 div 移动到在代码中的图像上方。这也应该有所帮助。

    【讨论】:

    • 我更改了它,这很好,但我希望 Contact Me div 位于整个视频下方,这样我就可以在下面的部分中创建一个与视频完全分开的联系表格
    猜你喜欢
    • 1970-01-01
    • 2013-04-24
    • 2013-02-22
    • 2014-01-22
    • 2020-12-08
    • 1970-01-01
    • 2015-02-15
    • 2015-10-31
    • 2019-04-06
    相关资源
    最近更新 更多