Изменение позиции абсолютного элемента без переполнения контейнера - PullRequest
Новая
       46

Изменение позиции абсолютного элемента без переполнения контейнера

0 голосов
/ 18 февраля 2019

Может быть, очевидный вопрос, но как сделать так, чтобы элемент с абсолютной позицией не переполнял свой контейнер при перемещении своей позиции вправо?Я знаю, что могу изменить его на относительную позицию или переместить на 99%, но для моего проекта это не произойдет.Я пытался использовать поля, отступы, подгонку объектов, но все безуспешно.Спасибо за любую помощь 

var green = document.getElementById('green');

function myFunct() {
    green.style.right = '100%';
}
    h1 {
        position: relative;
        width: 80%;
        height: 100px;
        margin: auto;
        background-color: red; 
    }
    
    #green {
        position: absolute;
        right: 0px;
        height: 100px;
        background-color: green;
        width: 20px;
    }
<h1>
<div id = 'green'></div>
    </h1>
    
<button onclick="myFunct()">FindHighScore</button>

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Вы можете установить overflow в hidden в родительском контейнере.

<h1> разрешенное содержимое - Содержимое фразы 

var green = document.getElementById('green');

function myFunct() {
  green.style.right = '100%';
}
div:not(#green) {
  position: relative;
  width: 80%;
  height: 100px;
  margin: auto;
  background-color: red;
  overflow: hidden;
}

#green {
  position: absolute;
  right: 0px;
  height: 100px;
  background-color: green;
  width: 20px;
}
<div>
  <div id='green'></div>
</div>

<button onclick="myFunct()">FindHighScore</button>
0 голосов
/ 18 февраля 2019

Использовать CSS calc()

var green = document.getElementById("green");

function myFunct() {
  green.style.right = "calc(100% - 20px)";
}

Или применить left: 0 и right: auto (сброс) 

var green = document.getElementById("green");

function myFunct() {
  green.style.left = "0";
  green.style.right = "auto";
}

A <div> не должно быть в <h1> тег между прочим.

...