CSS Как прикрепить слой (div) к краю
Сегодня столкнулся с такой проблемой: нужно было прикрепить рисунок справа, что бы он там висел постоянно, независимо от изменения окна по ширине.
Я знал, что есть такое свойство в CSS как absolute в параметре position. То есть:
style="position: absolute;"
что указывает слою, что он будет на постоянном месте, относительно родительского элемента.
Но изначально я пошел неверным путем... мне надо было прикрепить к правому краю, и я стал это делать через атрибут left. Так как фиксированное значение мне не подходит (откуда мне знать какого размера будет окно), я начал вычислять в процентах. В итоге получилось так, что при изменении ширины окна, часть слоя так же пряталась за краями окна.
И тут ко мне пришла гениальная мысль: надо отсчитывать от правого края!
То есть надо взять нулевое значение от правого края, и автоматически слой будет прикреплен к правому краю! Бинго!
Итого мой код выглядел так:
style="position: absolute; right: 0px;"
или можно так:
div {
position: absolute;
right: 0px;
}
Это открытие можно применить к любой стороне окна: к низу, верху, лева, права. Так что размещайте свои слои как вам заблагорассудится.
Если будут вопросы, задавайте в комментариях!
Я знал, что есть такое свойство в CSS как absolute в параметре position. То есть:
style="position: absolute;"
что указывает слою, что он будет на постоянном месте, относительно родительского элемента.
Но изначально я пошел неверным путем... мне надо было прикрепить к правому краю, и я стал это делать через атрибут left. Так как фиксированное значение мне не подходит (откуда мне знать какого размера будет окно), я начал вычислять в процентах. В итоге получилось так, что при изменении ширины окна, часть слоя так же пряталась за краями окна.
И тут ко мне пришла гениальная мысль: надо отсчитывать от правого края!
То есть надо взять нулевое значение от правого края, и автоматически слой будет прикреплен к правому краю! Бинго!
Итого мой код выглядел так:
style="position: absolute; right: 0px;"
или можно так:
div {
position: absolute;
right: 0px;
}
Это открытие можно применить к любой стороне окна: к низу, верху, лева, права. Так что размещайте свои слои как вам заблагорассудится.
Если будут вопросы, задавайте в комментариях!
Comments
Чтоб не возникало таких вопросов рекомендую почитать любой учебник по CSS первые пару глав.
Если подробно по данному коду:
position: absolute; выравнивает блок (любой блочный элемент) относительно другого блочного элемента с позицией position: relative;. В частном случае как в примере position: relative; обладает блок body, поэтому выравнивание идет по всей странице. Подчеркну что это частный случай, так можно выравнивать относительно любого блочного элемента.