Question

我正在尝试在预先存在的div中放置一个css对齐的链接，这应该用作各种各样的热点，但是页面似乎呈现并且该链接不可见（因为它出现在弹出窗口上方）它的大小是0px X 0px，即使我试图在CSS样式表中定义它。我使用的教程（我不是前端开发人员，在这次短暂的相遇远离之后）使用内联样式表而不是我们设置的外部样式（很多CSS与其他东西有关）这页纸）。如果我使用外部CSS样式表，我是否需要以不同方式格式化<a>标签？

我的代码：

<div id="KitchenOverlay" style="height: 310px; width: 267px;">
        <a id="closePopup" href="#"></a>
        <p>The background of this box is an image.</p>
</div>

文本显示，但不显示矩形。

Kitchen Overlay：

#KitchenOverlay 
{
    position: relative;
    left: 300px;
    top: 258px;
    width: auto;
    height: auto;
    text-align: center;
    z-index: 1000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    visibility: hidden;
    background-image: url(../images/Popup.png);
    background-repeat: no-repeat;
    }

（就像我说的，不是UI开发人员所以我可能错误地使用了./#）

ClosePopup：＆lt;这是无法正确显示的矩形。

#closePopup 
{
position: absolute; 
top: 40px; 
left: 20px; 
width: 83px; 
height: 83px; 
background-color: transparent; 
border: 1px solid yellow; 
}

如果您需要了解更多内容，请与我们联系。

Answer 1

你的问题在于你的定义。在您的HTML中，您使用的是ID #KitchenOverlay

您的CSS正在使用.KitchenOverlay定位一个类。

您有两种选择：

将CSS中的.KitchenOverlay更改为#KitchenOverlay。

或

更改...

<div id="KitchenOverlay" style="height: 310px; width: 267px;">

为...

<div class="KitchenOverlay" style="height: 310px; width: 267px;">

编辑您的回复：

尝试将#closePopup更改为类。因此， HTML
中的class="closePopup"
然后在 CSS ...
中定位您的代码
#KitchenOverlay .closePopup { ***STYLES*** }

修改

#closePopup { position: absolute !important; top: 40px !important; left: 20px !important; width: 83px !important; height: 83px !important; background-color: transparent !important; border: 1px solid yellow !important; }

你需要改变<a> tag ID attribute if using an external Stylesheet?</a>吗？

1 个答案: