Абсолютно позиционированный элемент, перекрывающий правую часть экрана без прокрутки

#html #css #css-position

#HTML #css #css-position

Вопрос:

Я пытаюсь абсолютно расположить div элемент неизвестной высоты и ширины так, чтобы он частично находился в правой части моего экрана, отключив прокрутку вправо. Он работает просто отлично, когда я пытаюсь сделать это в левой части экрана. Но когда я пытаюсь использовать его в правой части экрана, у меня возникают проблемы.

Я попытался использовать overflow-x для решения этой проблемы, но из-за этого все div неожиданно исчезает.

 .parent1 {
  position: relative;
  background-color: #ddd;
}

.child1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  left: -50px;
  top: 0;
}

.parent2 {
  position: relative;
  background-color: #ddd;
}

.child2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  right: -50px;
  top: 0;
}

.parent3 {
  position: relative;
  background-color: #ddd;
  overflow-x: hidden;
}

.child3 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  right: -50px;
  top: 0;
}

 <div class="parent1">
  <div class="child1">
    This works on the left: half of the DIV is off the screen and un-scrollable; the other half is showing.
  </div>
</div>

<div class="parent2">
  <div class="child2">
    But when I try it on the right, I'm able to scroll the screen right and see this whole DIV.
  </div>
</div>

<div class="parent3">
  <div class="child3">
    I would expect overflow-x to solve this problem, but it hides the DIV entirely.
  </div>
</div>

JSFiddle

Как я могу сделать так, чтобы мой div элемент располагался в правой части экрана, а прокрутка отключена?

Ответ №1:

Вам просто нужно применить overflow-x: hidden body вместо этого. Ваше решение скрыть overflow-x для parent будет работать, если сам родительский элемент можно прокручивать, иначе скрывать нечего.

 body {
  overflow-x: hidden;
}

.parent1 {
  position: relative;
  background-color: #ddd;
}

.child1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #00ff00;
  left: -50px;
  top: 0;
}

.parent2 {
  position: relative;
  background-color: #ddd;
}

.child2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  right: -50px;
  top: 0;
}

.parent3 {
  position: relative;
  background-color: #ddd;
}

.child3 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  right: -50px;
  top: 0;
}

 <div class="parent1">
  <div class="child1">
    This works on the left: half of the DIV is off the screen and un-scrollable; the other half is showing.
  </div>
</div>

<div class="parent2">
  <div class="child2">
    But when I try it on the right, I'm able to scroll the screen right and see this whole DIV.
  </div>
</div>

<div class="parent3">
  <div class="child3">
    I would expect overflow-x to solve this problem, but it hides the DIV entirely.
  </div>
</div>

Ответ №2:

Измените стиль дочернего элемента 2 на position: fixed

 .child2 {
  position: fixed;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  right: -50px;
  top: 0;
}