There is such a code:

<div class="grid__item grid__item--featured-collections small--one-half medium-up--one-fifth"> <div class="grid-view-item"> <a class="grid-view-item__link" href="/'.$row[" type_tovara "].'/'.$row["products_id "].'-'.ftranslite($row["title "]).'/"> <div class="small--hide" style="margin-left: -35px;">'.$row["top_sales"].'</div> <div class="site-header__menu" style="margin-top: 22px; margin-left: -35px;">'.$row["top_sales"].'</div> <div class="small--hide" style="margin-left: -35px;">'.$row["under_order"].'</div> <div class="small--hide" style="margin-left: -35px;">'.$row["novelty"].'</div> <img class="grid-view-item__image" src="'.$img_path.'"> <div class="h4 grid-view-item__title">'.$row["title"].'</div> <div class="grid-view-item__meta"> <span class="visually-hidden">Regular price</span> <span class="product-price__price">'.group_numerals($row["price"]).' грн</span> </div> </a> </div> </div>

It is displayed like this, it is clear that the word "New" is on top of another label. enter image description here

It is necessary that subsequent labels if there is something to be from a new line, how not tried to do, it does not work, always move the labels along with the photo of the jacket ...

Label Styles Attach:

 .plus1{border:1px solid #0095EB;background-color:rgba(255, 255, 255, 0.8);color:#0095EB; z-index:3;border-radius:3px;padding:0px 4px 2px 4px;position:absolute;margin-left:35px;margin-top:-25px;font-size:12px;float:left;} .plus2{border:1px solid #0095EB;background-color:rgba(255, 255, 255, 0.8);color:#0095EB; z-index:3;border-radius:3px;padding:0px 4px 2px 4px;position:absolute;margin-left:35px;margin-top:-25px;font-size:12px;float:left;} .plus3{border:1px solid #0095EB;background-color:rgba(255, 255, 255, 0.8);color:#0095EB; z-index:3;border-radius:3px;padding:0px 4px 2px 4px;position:absolute;margin-left:35px;margin-top:-25px;font-size:12px;float:left;}

An example of how it should be:

enter image description here

1 answer 1

I do not see in the code that the styles classes added below are used. You have all styles using absolute positioning, respectively, your labels are grouped at one point. Try to create some kind of label container with absolute positioning. Instead of pointing it for each label.

Here is an example with a container:

 <div class="grid__item grid__item--featured-collections small--one-half medium-up--one-fifth"> <div class="grid-view-item"> <a class="grid-view-item__link" href="/'.$row[" type_tovara "].'/'.$row["products_id "].'-'.ftranslite($row["title "]).'/"> <div class="labels-wrapper"> <div class="small--hide" style="margin-left: -35px;">'.$row["top_sales"].'</div> <div class="small--hide" style="margin-left: -35px;">'.$row["top_sales"].'</div> </div> ... </a> </div> </div>

And then add style

 .labels-wrapper { position: absolute; }

And from the classes .plus1, .plus2, .plus3 remove position: absolute.

  • I don’t understand how to create a container ... In the code, the style classes are not visible because they are taken from the base. - No Name
  • @NoName put them in a div - this will be the container - Dmitry Polyanin