How to make sure that the strip of indicators when resizing retains its position on the image without changing html?

Question

How to do this, an example is presented

.b-about__carousel-inner { height: auto; position: relative; } .b-about .carousel-fade .carousel-inner .active { opacity: 1; position: relative; } .b-about__indicator-list { margin-top: -54px; width: 100%; top: 50%; bottom: auto; margin-top: -74px; position: absolute; } .b-about__indicator-list li { width: 17px; height: 2px; margin: 0 3px; background-color: #cfcfcf; border: 0; border-radius: 0; } .b-about__indicator-item.active { width: 17px; height: 2px; margin: 0 3px; background-color: #ed454b; margin: 0 6px; } .b-about__container-image { height: auto; width: 100%; background-color: #e6e6e6; text-align: center; position: relative; } .b-about__image { display: block; width: 100%; } .b-about__information { padding: 91px 15px 0 25px; margin: 0 auto; height: 300px; }

 <div role="listbox" class="b-about__carousel-inner carousel-inner"> <div class="active b-about__item item"> <div class="b-about__container-image"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD60q-ZK6Jnex3EvBk8tjS205SgzGkqzCQ0qDhgy-D84lrtTax151OVPs" alt="" title="" class="b-about__image"> </div> <div class="b-about__information"> <h2 class="b-title b-title--about">Двигатель</h2> <div class="b-about__text-about"> <p>Надежный, прочный и&nbsp;экономичный 4-цилиндровый двигатель</p> </div> </div> </div> <!-- Controls--> <ol class="b-about__indicator-list carousel-indicators"> <li data-target="#about" data-slide-to="0" class="active b-about__indicator-item"></li> <li data-target="#about" data-slide-to="1" class="b-about__indicator-item"></li> <li data-target="#about" data-slide-to="2" class="b-about__indicator-item"></li> <li data-target="#about" data-slide-to="3" class="b-about__indicator-item"></li> <li data-target="#about" data-slide-to="4" class="b-about__indicator-item"></li> </ol> </div>

And you can clarify about what it means to "maintain its position"?
I understand this is <ol class="b-about__indicator-list carousel-indicators"> .
@VadimOvchinnikov maintained its position relative to the bottom of the picture
@VadimOvchinnikov .b-about__carousel-inner I take half the height and correct the negative margin on the layout.
It would be possible simply to set the bottom as a percentage of the layout and that's it.

Accepted Answer · 2016-12-14T10:29:32

If you need a position relative to the bottom of the picture, just set it relative to the bottom, that is, bottom . At the same time, in this case, it is not necessary to specify a margin for absolutely positioned elements, although there are times when this is appropriate. If the container has a fixed size, then specify the units in pixels, if the container is rubber, then in percent.

And general advice: use less magic numbers like 74px .

so he has at the bottom of the picture inside b-about__item there is still a b-about__information , the height of which is unknown, as well as the height of the picture, they are different when resizing, as it can be done using only the bottom and only css, I have little understanding, maybe I’m dumb explain
@drtvader so you wrote to me that the height of b-about__information also changes during resize, as you then specified the indentation in pixels?
@drtvader you have now specified the bottom , for example 300px, and when you resize, your b-about__information will become 400px high and then where will your navigation be?

Vadim Leshkevich Vadim Leshkevich 2,902 6 23 · Answer 2 · 2016-12-14T10:13:23

If you don’t change html, then only javascript will set the top for your indicators to be the height of the image and the margin-top negative to the desired indent from the bottom

 var imgHeight = $('.b-about__container-image').height() $('.b-about__indicator-list').css('top', imgHeight); $(window).on('resize', function(){ imgHeight = $('.b-about__container-image').height() $('.b-about__indicator-list').css('top', imgHeight); });

 .b-about__carousel-inner { height: auto; position: relative; } .b-about .carousel-fade .carousel-inner .active { opacity: 1; position: relative; } .b-about__indicator-list { width: 100%; margin-top: -50px; position: absolute; } .b-about__indicator-list li { width: 17px; height: 2px; margin: 0 3px; background-color: #cfcfcf; border: 0; border-radius: 0; } .b-about__indicator-item.active { width: 17px; height: 2px; margin: 0 3px; background-color: #ed454b; margin: 0 6px; } .b-about__container-image { height: auto; width: 100%; background-color: #e6e6e6; text-align: center; position: relative; } .b-about__image { display: block; width: 100%; } .b-about__information { padding: 91px 15px 0 25px; margin: 0 auto; height: 300px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div role="listbox" class="b-about__carousel-inner carousel-inner"> <div class="active b-about__item item"> <div class="b-about__container-image"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD60q-ZK6Jnex3EvBk8tjS205SgzGkqzCQ0qDhgy-D84lrtTax151OVPs" alt="" title="" class="b-about__image"> </div> <div class="b-about__information"> <h2 class="b-title b-title--about">Двигатель</h2> <div class="b-about__text-about"> <p>Надежный, прочный и&nbsp;экономичный 4-цилиндровый двигатель</p> </div> </div> </div> <!-- Controls--> <ol class="b-about__indicator-list carousel-indicators"> <li data-target="#about" data-slide-to="0" class="active b-about__indicator-item"></li> <li data-target="#about" data-slide-to="1" class="b-about__indicator-item"></li> <li data-target="#about" data-slide-to="2" class="b-about__indicator-item"></li> <li data-target="#about" data-slide-to="3" class="b-about__indicator-item"></li> <li data-target="#about" data-slide-to="4" class="b-about__indicator-item"></li> </ol> </div>

And so, in general, you need to transfer the indicators to b-about__container-image and calmly point it to the desired bottom

It is impossible to carry, this is a carousel, in each element of the carousel is also not an option.
@drtvader Well then, only js, as I wrote, b-about__information is also not a fixed height and can change with resize?

How to make sure that the strip of indicators when resizing retains its position on the image without changing html?

2 answers 2

More articles: