具有位置：绝对和位置：相对不起作用的填充

Question

这里是CSS

.column_transparent_div {
    background-color: rgba(46, 47, 48, 0.45);
    height: 100%;
    width: auto;
    margin: 0;
    padding: 0 20px 0 20px; /* have 20px padding on the right and left hand side */
    position: relative;
    overflow: hidden;
    font-size: 10px;
}

.project_div {
    position: absolute; /* when I remove this line, it works fine */
    display: grid;
    grid-template-areas:
        "title          github"
        "project_text   project_text"
        ".              read_more"
    ;

    background-color: black;
    color: white;
    border-radius: 10px;
    margin: 25px 0 25px 0;
}

当我启用position：absolute时，填充将在左侧起作用，而不在右侧起作用。如果我删除position：absolute，则填充在两侧均有效。

Answer 1

填充属于父元素。使用绝对位置时，您将从父级中移除子元素，并将其相对于父级的起始位置进行定位。我看到两个选择。

选项1：您可以使用上，下，左和右移动元素。

.project_div {
  top: 0; 
  right 20px;
  bottom: 0; 
  left: 20px;
}

选项2：您可以添加环绕div和相对于新元素的位置。

.column_transparent_div {
  background-color: rgba(46, 47, 48, 0.45);
  height: 500px;
  width: auto;
  margin: 0;
  padding: 0 20px 0 20px;
  overflow: hidden;
}
.wrapper {
  position: relative;
}

.project_div {
  position: absolute;
  color: white;
  background-color: black;
  border-radius: 10px;
  margin: 25px 0 25px
  0;
  width: 100%;
}

<div class="column_transparent_div">
  <div class="wrapper">
    <div class="project_div">
      .project_div
    </div>
  </div>
</div>