Question

我有两段文字，一条是右对齐，一条是左对齐。右侧的文本工作正常，并链接到正确的页面，但左侧的链接不起作用。它们甚至不显示为链接。该网站现场直播 - http://kingdombrand.com/Film/Films/TestFilm（ps。它只能通过链接访问，无法在网站导航中找到）

以下是使用的代码

<div class="VideoText" align="left">
    <a href=""><span> <strong> Credits </strong> </span></a> <br>                    
    Directed By: <a href="http://www.kingdombrand.com/Film/Alek/Portfolio"> Link One </a> <br>
    Edited By:   <a href="http://www.kingdombrand.com/Film/Jess/Portfolio"> Link Two </a>
    <br>                                 
    <br>                           
</div>

<!-- S H A R E-->
<div class="VideoShare" align="right">
    <b> Share </b> <br>
    <a href="http://www.twitter.com/share">Twitter</a><br>
    <a href="#" onclick=" window.open(
      'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 
      'facebook-share-dialog', 
      'width=626,height=436'); 
       return false;">
       Facebook
    </a>
    <br>
</div>

这是CSS：

.VideoText {
   position: absolute;
    left: 200px;
    top:  475px;
    overflow:visible
}

.VideoShare {
   position: absolute;
    Left: 200px;
    width:67.5%;
    top:  475px;
    overflow:visible;
}

Answer 1

链接确实有效，只有div.VideoShare才能涵盖这些链接。在后者上加display: none;并将鼠标悬停在链接上进行检查。

我无法帮助您使用可靠的CSS解决方案。我个人float: right（或display: inline-block）视频共享按钮，因此包含div的内容不会水平拉伸100％。可能有更好的解决方案。

Answer 2

似乎是z-index问题，只需为两者添加z-index：

.VideoText {
    position: absolute;
    left: 200px;
    top:  475px;
    overflow:visible;
    z-index: 2;
}

.VideoShare {
    position: absolute;
    Left: 200px;
    width:67.5%;
    top:  475px;
    overflow:visible;
    z-index: 1;
}

来自MDN：

z-index属性指定元素的z顺序及其顺序后人。当元素重叠时，z顺序决定哪一个涵盖了另一个。具有较大z指数的元素通常覆盖一个较低的元素。

Answer 3

试试这个

.VideoText {
   position: absolute;
    left: 100px;
    top:  475px;
    overflow:visible
}

.VideoShare {
   position: absolute;
    Left: 300px;
    width:67.5%;
    top:  475px;
    overflow:visible
}

Answer 4

将z-index: 1;放到

.VideoText {
}

Answer 5

您的.VideoShare div覆盖您的链接。尝试删除宽度并使用右侧而不是左侧放置div。因为你需要它在右边。

.VideoShare {
  ...
  /* left: 200px; */
  right: 200px;
  /* width: 67.5%; */
  ...
}

Answer 6

解决方案很简单））左边的链接是正确的，但是你的div用class =＆＃34; VideoShare＆＃34;来覆盖。你可以尝试纠正左：200px到左：400px例如对于class =＆＃34; VideoShare＆＃34;并希望你能得到我的意思

Answer 7

正如我在上面的评论中所说，你的两个容器只是相互重叠。您可以使两个容器具有相同的宽度，并使用绝对定位将右侧容器移动到右侧。

.VideoShare {
    left: auto;
    top: 475px;
    width: 200px;
    right: 200px;
    position: absolute;
}

<a href=" window.open (...) "> not working</a>

7 个答案: