2016-06-30 6 views
-1

Так в основном у меня в HTML (с использованием начальных загрузки классов) страницы с продуктами, которые продемонстрированы с помощью миниатюру и подписи классов. Над изображением продуктов находится ON SELL (закругленный красный тег). Я присвоил этому элементу красного круга положение абсолютное и до col-sm-9 позиция относительная. Проблема в том, что когда я изменяю размер браузера, лента, которая появляется над миниатюрой, не реагирует.CSS Positioning-Position относительного и абсолютный Bootstrap

Я знаю, что означают эти два свойства позиционирования и как они работают в отношении друг к другу. Но, похоже, на практике мне не хватает чего-то очень важного.

Я вставлю мой HTML и CSS здесь, и если вы можете дать мне свое мнение I`ll очень рад узнать это правильный путь и дать вам мое спасибо :)

Здесь есть весь код : http://www.bootply.com/8TMS5WgWt2

ответ

2

В вашем CSS для .sale измените ваше позиционирующее значение left: 149px на right: -19px. Это поможет улучшить положение при изменении ширины. Я также рекомендовал бы двигая position: relative от .col-sm-9 и на .thumbnail

1

В вашем CSS, заменить влево для правого

top: -19px; 
left: 149px; 

С левой, всегда вычислить из левого положения.

top: -19px; 
right: yourpixels; 

Ниже приведен пример с right: 0px
http://www.bootply.com/EzRZnhA2EC#

Смежные вопросы