CSS div居中时会放在另一个div的前面

编程问答 2022-08-15

问题描述

我有一个* ngfor来制作div，但是当我将div设为abslute时，div会全部放在同一位置而不是列表中。

我需要使div复杂化，以使用相对的CSS更改其中的内容。

html：

<ion-grid >
    <div *ngFor="let card of restPointsCards;let i=index" id="card">


      <ion-row>
        <ion-col >
          <ion-img *ngIf="userPercentageCards[i]>= 100" src="../../../assets/icons/PointsCard_100.png" ></ion-img>
          <ion-img *ngIf="userPercentageCards[i]>= 85 && userPercentageCards[i] <100" src="../../../assets/icons/PointsCard_85.png"></ion-img>
          <ion-img *ngIf="userPercentageCards[i]>= 70 && userPercentageCards[i]< 85" src="../../../assets/icons/PointsCard_70.png" ></ion-img>
          <ion-img *ngIf="userPercentageCards[i]>= 50 && userPercentageCards[i]< 70" src="../../../assets/icons/PointsCard_50.png" ></ion-img>
          <ion-img *ngIf="userPercentageCards[i]>= 30 && userPercentageCards[i]< 50" src="../../../assets/icons/PointsCard_30.png" ></ion-img>
          <ion-img *ngIf="userPercentageCards[i]>= 15 && userPercentageCards[i]< 30" src="../../../assets/icons/PointsCard_15.png" ></ion-img>
          <ion-img *ngIf="userPercentageCards[i]< 15 && userPercentageCards[i]> 0" src="../../../assets/icons/PointsCard.png"></ion-img>
        </ion-col>
        <ion-col >
          <ion-text> {{card.cardPoints}} = {{card.cardValue}} € </ion-text>
<!--          <ion-text>{{userPercentageCards[i]}} %</ion-text>-->
          <ion-button id="useButton" *ngIf="userPercentageCards[i] >=100" style="bottom: 0"> Usar Cartão!</ion-button>
        </ion-col>
      </ion-row>

    </div>

css：

#card{
  position: absolute;
  border: #5e8d93 2px solid ;
  margin-top: 5px;
  height: 140px;
  width: 70%
}

我想更改div内图像和按钮的位置，这就是为什么要使div笨拙，所以我可以例如更改按钮：

css：

#useButton{
  position: relative;
  bottom: 5px;
}

解决方法

正是import matplotlib.pyplot as plt import networkx as nx myGraph = nx.path_graph(n=5) # Add your node. You can add more nodes if you want,# just remember to specify the color for the new nodes,# else they will get the default color name = "colored_Node" myGraph.add_node(name,color='green',style='filled',fillcolor='blue',shape='square') # Get the colored dictionary colored_dict = nx.get_node_attributes(myGraph,'color') # Create a list for all the nodes default_color = 'blue' color_seq = [colored_dict.get(node,default_color) for node in myGraph.nodes()] # Pass the color sequence nx.draw(myGraph,with_labels=True,font_weight='bold',node_color=color_seq) plt.show() 所做的，它将元素放置在相对于身体或位置为relative的另一个父对象的相对位置的绝对位置。在这种情况下，使用绝对位置势必将它们放置在position: absolute的同一区域。

,

我不知道您为什么会使用Position:absolute元素，但让我们假设没有其他冲突。用div / span包裹#card容器，并给它class="relative"包裹，您可以包裹任何绝对元素，这将使绝对元素作为静态元素存在，并继续进行流程，但它们是不可预测的

将此CSS类添加到文档中

.relative{
  position: relative;
  display: inline-block;
  width:100%;
  height:100%;
}

您可以根据需要为类命名，但是要注意：绝对行为取决于任何元素和样式，假设不涉及其他任何样式，则应该将下面的元素列出在彼此之下，但溢出元素除外。

出于任何原因，我都不建议使用绝对元素，因为它们总是会破坏HTML的流程，因此，除非您必须这样做。考虑使用上述CSS来使元素不重叠。

如果您想获得更有效的解决方案，请考虑使用Pastebin或Codepen，这比我们可以在不依赖绝对元素的情况下帮助您获得预期的效果。

css-positiondivisiongridgridhtml