如何将一个 div 元素与另一个元素放在同一个位置?(一个将被隐藏并作切换)

Question

我想要一个图像，当点击时会淡出并显示"后面"的文本。现在我所能做的就是让我的文本出现在图像的上方或下方，具体取决于我在 html 文件中移动元素的位置。

如果我能弄清楚这一点，计划是让文本显示：无和图像显示：块，然后通过单击图像/单击文本div的操作来切换它们。

如果这没有意义，我可以尝试澄清。

我正在为免费代码营开发我的"致敬页面"。这不是一个要求，而是我想完成的额外任务。这个想法是让我的主要图像淡出并显示"作业历史记录和 Python 时间线"的列表项。所有内容都在下面的代码笔链接中进行了注释。有问题的是最后两个div元素"主图像"和"作业历史和Python时间表">

这是我的代码笔的链接

<!-- job history and Python timeline -->
<div id="history-timeline" class="text-center" style="display:show; inline">
<p>
<ul>
<li>
<li>
<li>
<li>
</div>

Answer 1

将position:absolute添加到您的图像中，因此它将不在页面流中，并且img将堆叠在h2上。 现在，您可以在单击时隐藏图像。我在div 的hover使用了display:none，确保您的父div高度与图像的高度相匹配。

.hide_on_hover{
width:200px;
height:200px;
}
.hide_on_hover img{
position:absolute;
}
.hide_on_hover:hover img{
display:none;
}

<div id="main-image-div" class="text-center hide_on_hover">
<img 
id="main-image" 
src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" 
class="rounded img-thumbnail " width="200" height="200">
<!-- job history and Python timeline -->
<h2 id="history-timeline">does this work</h2>

</div>

Answer 2

这可以通过调整定位和 z 索引轻松实现。

您的父div 元素需要具有position: relative属性。然后，文本将具有position: absolute属性。这将允许文本与图像重叠。位置相对告诉子元素将自己定位到具有相对属性的关闭父元素。

下一步是应用更多属性来控制图层。根据我的理解，你会希望图像是顶层，文本是下层。解决方案是将position: relative; z-index: 2应用于图像并向文本添加z-index: 1。z-index 属性为重叠元素提供图层顺序。我们需要为图像提供position: relative，因为该元素的默认位置忽略了 z-index 属性。事情现在应该开始看起来更近了。

现在，您提到使用display: block和display: none属性来隐藏图像并显示文本。这将基于您描述的功能工作，但会产生跳跃效果，因为设置为显示：没有丢失高度设置，因此您会在页面上折叠内容。如果您不想这样做，则需要改用visibility: hidden和visibility: visible。

但是，我可能会做的是添加一个新的 css 类：

.hidden{ opacity: 0 }

通过这种方式，您可以拥有更简单的javascript，也可以达到动画淡入淡出效果的程度。说到Javascript，这将使用以下代码：

$("#main-image").click(function(){ $(this).toggleClass('hidden') });

以下是修改后的一些代码的样子：

.HTML：

<div id="main-image-div" class="text-center" style="position: relative">
<img id="main-image" src="http://sdtimes.com/wp-content/uploads/2014/08/0815.sdt-python.jpg" style="margin-top:2%; position: relative; z-index: 2;" class="rounded img-thumbnail">
<h2 id="history-timeline" style="position: absolute; z-index: 1; ">does this work</h2>        
</div>

.CSS

.hidden{opacity: 0}

在此范围之外，您应该避免使用内联样式，并让 html 只使用类。在 css 代码中引用这些类，并在那里应用样式。这允许在构建网站时提供更干净、更易于管理的代码。

Answer 3

试试这段代码

$(document).ready(function(){
$("#main-image").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#history-timeline').removeClass("hide-block");
$('#history-timeline').addClass("show-block");
});
$("#history-timeline").click(function(){
$(this).removeClass('show-block');
$(this).addClass('hide-block');
$('#main-image').removeClass("hide-block");
$('#main-image').addClass("show-block");
});
});

演示