Question

我尝试使用css向我的主div显示另一个div，但是从主div的底部开始定位，而不是像我的代码测试一样阻止。

HTML

<div id="main">
   <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
    <div id="hidden">
      <h2><a href="">Link1</h2>
      <h2><a href="">Link2</h2>
    </div>
</div>

CSS

#main {
width: 540px;
border: 1px solid #eee;
text-align:center;
}

#hidden {
display:none;
border: 4px solid #eee;
}

#main:hover > #hidden {
display:block;
}

我喜欢的是下面的图片： http://i.stack.imgur.com/Q41JG.png

Answer 1

试试这个：

#main {
    width: 540px;
    border: 1px solid #eee;
    text-align:center;
    position: relative;
}
#hidden {
    display:none;
    border: 4px solid #eee;
    position: absolute;
    bottom: 0px;
    background: white;
    width: 100%;
}
#main:hover > #hidden {
    display:block;
}

Demo.

<强>解释
首先，我将#main div的位置设置为相对于身体，然后我将#main的孩子的位置#hidden置于绝对位置，这样就会移动#hidden使用#main作为#hidden的父级现在与文档正文相对定位，是的，我将底部边距更改为0，以便它可以粘贴到#main div的底部

Answer 2

你想要的是想要更多的代码！

它需要位置属性代码！通过使用哪个，您可以将元素放在另一个元素上。否则就不可能！

现在是小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/R89A8/

我将CSS更改为：

#main {
width: 540px;
border: 1px solid #eee;
text-align:center;
    position: relative;
}

#hidden {
display:none;
border: 4px solid #eee;
}

#main:hover > #hidden {
    position: absolute;
    display: block;
    bottom: 0px;
}

您可以看到我刚刚为您的代码添加了position: value和bottom: value属性。

第二件事，HTML如下：

<div id="main">
   <a href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
    <div id="hidden">
        <h2><a href="">Link1</a></h2>
        <h2><a href="">Link2</a></h2>
    </div>
</div>

请注意，您需要关闭每个开始标记，以使您的HTML成为有效的HTML！

对不起，我没有给出盒子的宽度和高度值，你可以自己设置！

更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/position

Answer 3

写：

#hidden {
    position:absolute;
    bottom:0;
    width:100%;
    background:white;
}

Updated fiddle here.

在悬停显示div，从主div底部的位置

3 个答案: