1
votes

Existe-t-il un autre moyen de positionner des éléments absolus?

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  position: absolute;
  top: 0;
  font-size: 10px;
}

.in-transit {
  left: 67px; /*Added temporarily*/ 
}

Il faut positionner la balise "en transit" exactement après le premier onglet qui contient du texte dynamique. Pour l'instant, j'ai ajouté left: 67px à en transit

J'ai essayé left: auto ça ne marche pas. Existe-t-il un autre moyen d'y parvenir sans changer le HTML?

REMARQUE: je ne peux pas changer le HTML.

html css css-position absolute

4 commentaires

pourquoi voulez-vous que en transit soit positionné absolument ? il suffit de supprimer la position absolue et elle viendra juste après le contenu dynamique ...

Vous voulez positionner ces balises exactement au-dessus de l'image. Y a-t-il un autre poste qui pourrait fonctionner ici?

Savez-vous quelle est la hauteur exacte de l'image? Ensuite, vous pouvez positionner de manière absolue links-tags et icon au lieu de special et in-transit .

L'image peut être de n'importe quelle taille sans dimension fixe.

3 Réponses :

1
votes

enveloppez le div spécial et en transit dans une autre balise div et insérez ce div au-dessus de votre image. Comme ci-dessous:

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="tags-wrap">
      <div class="special">Lorem Ipsum</div>
      <div class="in-transit">in-transit</div>
    </div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
}
.tags-wrap {
  position: absolute;
  top: 0;
  left: 0;
}
.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  float: left;
}

1 commentaires

Impossible de changer le HTML

1
votes

Au lieu de donner la position absolue pour special et en transit , donnez-la à son wrapper div links-tags code> - voir la démo ci-dessous:

 

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>
.wrap {
  position: relative;
}

.links-tags {
  display: flex;
  position: absolute; /* ADDED */
  top: 0; /* ADDED */
  flex-wrap: wrap; /* ADDED */
  height: 100%; /* ADDED */
  align-content: space-between; /* ADDED */
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  /*position: absolute;*/
  top: 0;
  font-size: 10px;
}

.icon { /* ADDED */
  width: 50%;
  transform: translateY(100%);
}

  EDIT: Ce n'est généralement pas possible - mais voici un  hack  si nous supposons que les codes  spéciaux  et  en transit  > avoir une largeur inférieure à 50% de l'image qui remplit wrap:
 
  Faire de  link-tags  une  flexbox  enveloppante avec  alignement flex-line  défini sur  space-between  code >. 
 
  Ajoutez  width: 50%  à  icon  et traduisez-le à 100% de sa dimension 
 
  Voir la démo ci-dessous: 
  
 

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>
.wrap {
  position: relative;
}

.links-tags {
  display: flex;
  position: absolute; /* ADDED */
  top: 0; /* ADDED */
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  /*position: absolute;*/
  top: 0;
  font-size: 10px;
}

4 commentaires

XYZ doit être sous l'image.

@dipikapatil qui est généralement difficile sans changer le balisage, mais regardez le hack ci-dessus ...

Cela n'a pas vraiment résolu mon problème. J'ai dû ajouter un wrapper HTML pour les deux boutons.

agréable de savoir que c'est corrigé, merci pour le suivi, vous pouvez ajouter une réponse avec votre solution originale :)

0
votes

Si vous souhaitez masquer des icônes, vous pouvez simplement le faire avec text-indent

<div class="wrap">
  <img src="https://via.placeholder.com/200" alt="">
  <div class="links-tags">
    <div class="special">Lorem Ipsum</div>
    <div class="in-transit">in-transit</div>
    <div class="icon">
      <span>X</span>
      <span>Y</span>
      <span>Z</span>
    </div>
  </div>
</div>

.wrap {
  position: relative;
}

.links-tags {
  display: flex;
  position:absolute;
  top:0;
  left:0;
}

.special,
.in-transit {
  background: #000;
  color: #fff;
  padding: 5px;
  font-size: 10px;
  position:relative;
  margin:2px;
}
.icon {
  text-indent:-100px;
}

0 commentaires