@atumbochka

Почему не работает margin-right?

Есть следующий css-код, в котором я пытаюсь поместить изображения по центру, так как margin: auto почему-то не работает. Я использую top и left.
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img {
    width: 500px;
    height: 500px;
}

.img1, .img2 {
    top: 35%;
    left: 35%;
    transition: all 1s;
    position: fixed;
}

.img3 {
    margin-top: 500%;
}

После чего в js я хочу уменьшить и разместить 2 фото в разные стороны, но margin-right отказывается работать.
const image = document.querySelectorAll("#img");

image.forEach(el => el.style.opacity = "0");

window.onscroll = () => {
    if (window.pageYOffset > 200) {
        image[0].style.opacity = "1";

        setTimeout(() => {
            image[0].style.width = "150px";
            image[0].style.height = "150px";
        }, 1000);

        image[0].style.marginRight = "1000px";
    }

    if (window.pageYOffset > 500) {
        image[1].style.opacity = "1";

        setTimeout(() => {
            image[1].style.width = "150px";
            image[1].style.height = "150px";
        }, 1000);

        image[1].style.marginRight = "500px";
    }
}

При чём именно margin-right, остальные "маржины" работают. Я предполажу, что это из-за top и left, которые конфликтуют, так как они переносят изображение левее, а потом я переношу с помощью js правее. Как можно наладить работу margin-right, при этом оставив фото в середине?
  • Вопрос задан
  • 62 просмотра
Пригласить эксперта
Ответы на вопрос 1
1. const image = document.querySelectorAll("#img"); - id на странице может быть только один
2. Выравнять fixed-позиционированный элемент по по центру можно вот так:


3. Никаких "конфликтов" margin нет - они вне потока документа и не могут друг друга отталкивать, их положение (картинок) задается top, left, bottom, right
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
08 дек. 2021, в 07:57
300 руб./за проект
08 дек. 2021, в 07:48
500 руб./за проект
08 дек. 2021, в 05:27
5500 руб./за проект