2016-06-30 17 views
-1

Also im Grunde habe ich in meinem HTML (mit Bootstrap-Klassen) eine Seite mit Produkten, die die Miniatur und Bildunterschrift Klassen präsentiert verwenden. Über dem Bild der Produkte befindet sich ein ON SELL (abgerundeter roter Tag). Ich habe diesem roten Kreis Element Position absolute und col-sm-9 Position relativ gegeben. Problem ist, dass wenn ich die Größe des Browsers ändere, die Multifunktionsleiste, die über die Miniaturansicht kommt, nicht reagiert.CSS Positioning-Position relative und absolute Bootstrap

Ich weiß, was diese zwei Positionierungseigenschaften bedeuten und wie sie in Bezug aufeinander arbeiten. Aber es sieht so aus, dass mir in der Praxis etwas Wesentliches fehlt.

Ich werde meine HTML und CSS hier einfügen und wenn Sie Ihre Meinung geben kann mir I `ll sehr froh sein, diese den richtigen Weg zu lernen und Ihnen meinen Dank :)

Hier haben Sie den gesamten Code : http://www.bootply.com/8TMS5WgWt2

Antwort

2

Ändern Sie in Ihrem CSS für .sale Ihren Positionswert von left: 149px zu right: -19px. Dies hilft ihm, sich besser zu positionieren, wenn sich die Breite ändert. Ich würde auch empfehlen Ihre position: relative vom .col-sm-9 und auf .thumbnail

1

in Ihrem CSS bewegen, für Recht

top: -19px; 
left: 149px; 

Mit linken ersetzen, ist es immer von der linken Position berechnen. Hier

top: -19px; 
right: yourpixels; 

ist ein Beispiel mit right: 0px
http://www.bootply.com/EzRZnhA2EC#