html - 我将元素定位为绝对元素，但未显示

Closed. This question is off-topic. It is not currently accepting answers. Learn more。
想改进这个问题吗？Update the question所以堆栈溢出的值小于aa>。
两个月前关闭。
我正在制作一个带有html和css的响应照片卡，在卡中我有一个相对的div，其中有两个嵌套的div（tag1和tag2）应该显示文本。我用左参数和下参数将它们绝对定位，在原子中它们看起来很好。但在Chrome或jsfiddle中，它们甚至都没有出现。另外，“更多信息”按钮应该被移到右边，但它不是。我不知道我做错了什么。我是html、css和响应性的初学者。除了这个问题，如果有什么方法可以提高我的反应能力，请告诉我。谢谢！
图片作为参考它应该如何看起来。。。
on-topic
这里有一个到JSFiddle的链接：screenshot
HTML格式：

<div class='card'>
  <div class='card_left'>
    <img src='https://images.unsplash.com/photo-1531759051464-c1e326cd6df1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f4ccdfa03552986026cd24eaf4e9756f&auto=format&fit=crop&w=1293&q=80'>
    <div class='tag tag_1'>
      <p>Lorem ipsum.</p>
    </div>
    <div class='tag tag_2'>
      <p>Lorem ipsum.</p>
    </div>
  </div>
  <div class='card_right'>
    <div class='m_button'>
      <a href='https://www.youtube.com/' target='_blank'>MORE INFO</a>
    </div>
  </div>
</div>

CSS:

.card {
  width: 750px;
  height: 350px;
  background: transparent;
  position: absolute;
  overflow: hidden;
}
.card_left {
  width: 350px;
  height: 350px;
  float: left;
  overflow: hidden;
  background: transparent;
  position: relative;
}
.card_left img {
  height: 100%;
  width: auto;
  position: relative;
  object-fit: cover;
}
.card_right {
  width: 380px;
  height: 350px;
  position: relative;
  float: right;
  background: #ffffff;
  padding: 0 0 0 20px;
}
.tag_1 p {
  left: 20;
  bottom: 40;
}
.tag_2 p {
  left: 20;
  bottom: 10;
}
.tag p {
  color: #000000;
  background: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  border: 2px solid #69B616;
  padding: 2px 5px 2px 5px;
  font-size: 12px;
  position: absolute;
  left: 20;
  bottom: 40;
  z-index: 1;
}
.m_button {
  margin: 30px 0 0 0;
}
.m_button a {
  border: 2px solid #434264;
  padding: 10px 10px 10px 10px;
  position: absolute;
  left: 20;
  bottom: 20;
  font-size: 12px;
}

谢谢你的帮助！!

最佳答案

左偏移和下偏移缺少“px”。

.tag_1 p {
  left: 20px;
  bottom: 40px;
}

.tag_2 p {
  left: 20px;
  bottom: 10px;
}

关于html - 我将元素定位为绝对元素，但未显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51393117/

上一篇：asp.net mvc 5 捆绑 jquery 不工作

下一篇：javascript - 固定字体大小的html Canvas ，如何在放大/缩小时改变它

html - 如何使用内部绝对div的所有宽度

twitter-bootstrap - 有没有办法重置 border、border-radius 和 background-color CSS 属性？

html - 主体背景重叠 Div 图像背景

c# - 生成 PDF 时不应用 wkHtmlToPdf css

css - 固定定位元素未按预期运行

css - 如何将元素定位在网页的最右侧，而不是浏览器页面？

javascript - 如何允许用户在 <input type ="file"> 标签中选择任何文件或目录？

html - 如何定位子容器，使它们恰好位于彼此之上？

html - "chevron"CSS 和浏览器缩放问题中的样式导航栏