Как задать правильное позиционирование?
Все привет!
Дело вот в чем... У меня по макету(смотрите на картинке) есть заполнитель черного цвета, справа на пол экрана. При адаптации div слетает в ту сторону где он позиционируется(right: -40rem). Честно, не знаю как это объяснить, но при уменьшении экрана, правая часть, как бы съедает этот div, оставляя маленький хвост левого угла. Нужно чтобы этот заполнитель дотянул хотя бы до 768px. А дальше там burger menu в навигации пойдет.
Цель в том, чтобы этот черный заполнитель, оставался в исходном положении. В добавок хочу сказать, что у меня нет дизайнера и я не знаю должно ли так происходить, так сказать на все воля фантазии. Или я изначально сделал что то не так и нужно использвать что то другое?
Надеюсь по картинке и по коду будет более менее понятно с чем я столкнулся.
function App() { return ( <div className="App"> <div className="box__decor"></div> <NavBar /> <Home /> <Footer /> </div> ); } |
function App() { return ( <div className="App"> <div className="box__decor"></div> <NavBar /> <Home /> <Footer /> </div> ); }
.App { min-height: 100vh; width: 100%; position: relative; overflow: hidden; & .box__decor { transform: rotate(9.67deg); z-index: -1; width: 100%; height: 100%; background: $blackSecondary; position: absolute; top: -0.5rem; right: -40rem; } } |
.App { min-height: 100vh; width: 100%; position: relative; overflow: hidden; & .box__decor { transform: rotate(9.67deg); z-index: -1; width: 100%; height: 100%; background: $blackSecondary; position: absolute; top: -0.5rem; right: -40rem; } }
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для задания правильного позиционирования элемента на веб-странице вам следует использовать CSS. Существует несколько способов задания позиционирования элементов, в зависимости от требуемого результата.
1. **Статическое позиционирование**: Это значение по умолчанию для всех элементов. Элементы отображаются в порядке, в котором они появляются в HTML коде. Для статического позиционирования не требуется использование дополнительных свойств в CSS.
2. **Относительное позиционирование**: Это позиционирование элемента относительно его исходного местоположения. Для этого используйте свойство `position: relative;` в CSS. Например:
.element { position: relative; top: 20px; left: 30px; }
3. **Абсолютное позиционирование**: Элемент абсолютно позиционируется относительно ближайшего родительского элемента с позиционированием, отличным от статического. Используйте свойство `position: absolute;` в CSS. Например:
.element { position: absolute; top: 50px; right: 0; }
4. **Фиксированное позиционирование**: Элемент фиксируется относительно видимой области браузера. Для этого используйте свойство `position: fixed;` в CSS. Например:
.element { position: fixed; bottom: 0; right: 0; }
5. **Относительно-фиксированное позиционирование**: Элемент фиксируется относительно его ближайшего позиционированного родителя. Для этого используйте свойство `position: sticky;` в CSS. Например:
.element { position: sticky; top: 0; }
Выберите подходящий вариант позиционирования в зависимости от требуемого результата. Не забудьте также учитывать другие CSS свойства, такие как `top`, `bottom`, `left`, `right`, чтобы точно задать позицию элемента на странице.