Почему при абсолютном позиционировании блок смещается вправо?

Question

[alwaystried]

Есть проблема. При указании стиля position: absolute блок произвольно смещается вправо в центр, и не дает себя сместить влево

Comments

[Danny Arty]

код бы глянуть

[smilingcheater]

телепаты в отпуске, без примера кода в песочнице с воспроизводимой проблемой - можно только гадать

[alwaystried]

Сам блок

.ripjw {
    display: block;
    position: absolute;
    background-color: rgb(0, 0, 0);
    border-radius: 15px;
    width: 150px;
    height: 150px;
    margin-right: 80%;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
}

Родитель

position: fixed;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    background: url(fellit.jpg) no-repeat center center fixed;
    background-size: cover;
    background-position: absolute;
    background-attachment: absolute;
    transition-timing-function: linear;

[iBird Rose]

alwaystried, ничего не смещается. https://jsfiddle.net/2ekjvmy6/

[mahmudchon]

alwaystried, такая же история - https://codepen.io/anton-marinin/pen/PoGLQXv
Вы бы не куски кода скидывали, а весь, потому как ошибка может быть где угодно и найти за собой бывает оч сложно какие-то незакрытые скобки))

[alwaystried]

Думаю, вы правы

.navbar-coll {
    position: center;
    display: flex;
    flex-wrap: wrap;
    height: 80px;
    border: 20px;
    background-color: rgba(37, 34, 34, 0.897);
    top: 0;
}
body {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
body {
		background: url(fellit.jpg) no-repeat center center fixed;
        background-size: cover;
        background-position: absolute;
        background-attachment: absolute;
}
.pagest {
    min-width: 100%;
    margin-right: auto;
    margin-left: auto;
    min-height: 100%;
}
.tty {
    flex-direction: row;
    display: inline-flex;
    top: 3.6%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    padding-left: auto;
    font-family: verdana;
    font-size: 20px;
    list-style-type: none;
    text-align: center;
    justify-content: space-between;
}
.nav-link {
}
.bcg {
    position: fixed;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    background: url(fellit.jpg) no-repeat center center fixed;
    background-size: cover;
    background-position: absolute;
    background-attachment: absolute;
    transition-timing-function: linear;
}
.social a {
    text-align: center;
    width: 48px;
    height: 48px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius: 24px;
    margin: 0 10px 10px 0;
    padding: 6px;
    color: #000;
    display: block;
    float: left; 
    opacity: 0;

}
.social a:not(:last-child) {
    border-right: none; 
}
.social a:after {
    content: "";
    clear: both;
    display: table;
}

button:active, button:focus {
    outline: none !important;
  }
  button::-moz-focus-inner {
    border: 0 !important;
}
.bcg:hover .social a {
    opacity: 1;
    transition: opacity .6s;
    animation: slideInUp;
    animation-duration: 1s;
}
.infob:focus {
    opacity: 1;

}
.bcg:hover {
    transition: 1s;
    background: rgba(0,0,0,0.5);
  }
.bcg:hover body {
    transition: 1s;
    background: rgba(0,0,0,0.5);
  }
.center-but {
    position: fixed;
    display: flex;
    min-width: 100%;
    min-height: 50%;
}
.maintext {
    position: relative;
    vertical-align: 10px;
    opacity: 0;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    transition: opacity .6s;
    font-size: 50px;
    color: azure;
    text-decoration: none;
    z-index: 1;
}
.txtcntr {
    margin-left: auto;
    text-align: justify;
    text-align: center;
    margin-right: auto;
    padding-top: 150px;
    vertical-align: 15px;
    z-index: 1;
}
.bcg:hover .maintext {
    opacity: 1;
    transition: opacity .9s;
    animation: slideInUp;
}
.b-text {
    font-family: 'Comfortaa', cursive;
    font-size: 25px;
    transition: opacity .6s;
    color: azure;
    text-decoration: none;
    position: relative;
    vertical-align: 10px;
    opacity: 0;
    text-align: center;
}
.bcg:hover .b-text {
    opacity: 1;
    transition: opacity .9s;
    animation: slideInUp;
}
.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }
.tty:hover .b-text {
    opacity: 1;
    transition: opacity .9s;
    animation: slideInUp;
}
.tty:hover .maintext {
    opacity: 1;
    transition: opacity .9s; 
    animation: slideInUp;
}
.buttons {
    margin-left: auto;
    text-align: justify;
    text-align: center;
    margin-right: auto;
    padding-top: 150px;
    vertical-align: 15px;
    align-items: center;
}
.maintext:hover {
    text-decoration: none;
}
.lnd {
    text-align: center;
    padding-top: 400px;
    vertical-align: 15px;
    display: block;
    opacity: 0;
    transition: opacity .4s;
}
.lndt {
    font-family: 'Indie Flower', cursive;
    text-decoration: none;
    font-size: 25px;
    color: aqua;
}
.lndt:hover { 
    color: #ff82bf;
}
.bcg:hover .lnd {
    opacity: 1;
    transition: opacity .9s; 
    animation: slideInUp;
}
.ripjw {
    display: block;
    position: absolute;
    background-color: rgb(0, 0, 0);
    border-radius: 15px;
    width: 150px;
    height: 150px;
    margin-right: 80%;
    z-index: 10;
    background-color: rgba(0,0,0,0.5);
    left: 0;
    top: 0;
}

[alwaystried]

<div class="pagest">
        <div class="bcg">
                <div class="txtcntr">
                    <a class="maintext">
                      Test<br>

                    </a>
                    <a class="b-text">
                        <div class="ripjw">
            
                        </div>
                             Тест
                    </a>
                </div>

[approximate solution]

alwaystried, Пора пожалуй научиться уже кидать куски кода не сразу на тостер, а сперва в песочнику - codepen.io, удостовериться там лично что проблема существует и дело не в кэше. И потом эту песочнику показывать и просить помощи.

[alwaystried]

approximate solution, Проблема была не в кэше. Похимичил с codepen и понял что проблема связана с текстом. Блок произвольно меняет положение в зависимости от длины текста