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

Question

[atumbochka]

Есть следующий 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, при этом оставив фото в середине?

Comments

[ThunderCat]

засуньте в фиддл, нифига не ясно, и мало кто умеет в голове строить хтмл со стилями как в гуглхром.

Answer 1

[Александр Варлаков]

1. const image = document.querySelectorAll("#img"); - id на странице может быть только один
2. Выравнять fixed-позиционированный элемент по по центру можно вот так:


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