Html “绝对定位”项目垂直移动布局

我最近想出了如何使用绝对位置垂直对齐一个项目，它工作得非常好，直到今天我做了一些事情。我重新设计了我的布局，使其具有流动性，可以在不同的屏幕分辨率下工作，现在该项正在向上移动并覆盖现有的布局项，扩展到它包含的div之外。有没有办法防止这种情况发生？。我知道它是这样做的，因为它是绝对定位的，我已经读过了，它从网站的流量中删除了它，但是有没有办法将这个项目保持在它包含的div中？它是向上移动的，因为当屏幕缩小时，内容会被挤压在一起，并将所有内容都向上推

---

这让我特别抓狂，因为我很确定它以前工作得很好，即使调整了尺寸，我想我弄乱了一些东西，毁了它。如何使这个绝对位置事件发生？

您可以尝试使用z-index属性，但这取决于您的布局

将项的父元素的位置设置为相对位置。绝对定位图元仅相对于其最近的绝对或相对定位父图元

---

但是，可能有比使用绝对定位更好的方法来实现垂直对齐…

父元素已设置为相对，我必须与之斗争才能使其工作。关于在底部垂直放置物体的其他方法，你有什么建议吗？你能举一个你想做的例子吗？下面是我基本上想做的一个例子。我不明白为什么data2和data3没有像它们应该的那样浮动，因为它们在我自己的代码中是浮动的，但我的主要问题是，如果可能的话，让data1和img坐在TD的底部，而不使用绝对位置，因为两个高度都没有设置，并且会一直扰乱我的布局@embdenVertical对齐与浮动对齐组合使用时不起作用，但如果父元素相对定位，则可以使用绝对定位。由于要将内容放置在底部，请使用底部：0；。请参见此处更新的fiddle：对于data2和data3，您在CSS选择器中缺少前面的数字符号-它们应被引用为data2和data3。请注意，通常情况下，最好不要使用表格布局内容，但在您的特定用例中，它可能工作得很好。我已经使用了绝对位置功能，但后来我注意到，当我调整屏幕大小时，由于我有一个流畅的布局，Data1或其旁边的img中的内容对于它的容器来说会突然太高，它会爆发，因为它已经从布局的流程中移除了。这就是我想要避免的。我不能设置容器高度，因为它是动态内容，所以我需要一个对齐解决方案，而不是绝对定位。我更新了JSFIDLE，向您展示了它可能有助于该项显示在它阻止的导航栏前面，但我希望它不要突破它包含的div。我不明白它为什么不这么做。为什么整个版面不能像正常的那样向下移动呢？绝对不会像正常的那样向下移动，如果你想要更好的回答，就发布你的html+css，但是我决定不让我的项目像我想要的那样在底部对齐。这些项目没有设置高度，因此我无法围绕绝对位置从布局流程中移除这一事实进行设计，而且似乎没有人有其他想法来垂直对齐元素底部的项目。哦，好吧。