Позиционирование CSS внутри центрированного div

Мне нужно поместить элемент в верхнем правом углу внутри центрированного div следующим образом:

.fullscreenholder {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -960px;
  margin-top: -540px;
  width: 1920px;
  height: 1080px;
  border: 10px solid #ff0000;
}
<div class="fullscreenholder">example</div>

    

Когда div больше, то окно, почему верхний и левый из них обрезаны? Есть ли способ встретить или обнаружить это, чтобы он не влиял на элемент внутри div (он его исчезает)?

---- редактировать ----

Это то, что я в конечном итоге использовал на основе ответа @ CodeSpent. В моем случае сайт предназначен для киоска, поэтому большому размеру не нужно учитывать мобильный доступ.

<div class="wrapper">

    <div class="fullscreenholder">
        <div class="menubuttons">button1 | button2</div>
    </div>

</div>


.wrapper
{
    background-color: #ff0000;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    height: 100vh;
 }

.fullscreenholder
{
    background-color: #00ff00;
    margin: auto;
    width: 1920px;
    height: 1080px;
    border: 10px solid #ff0000;
}

.menubuttons
{
    background-color: #0000ff;
    display: inline;
    right: 0px;
    top: 0px;
    width: 260px;
    height: 30px;
    z-index: 9;
}

html,css,css-position,

3

Ответов: 3


3 принят

Несколько вещей, чтобы рассмотреть;

  • Не все получат разрешение 1920x1080 при просмотре этого.
  • absoluteпозиционирование должно действительно использоваться исключительно для вещей типа слоев, поскольку absoluteполностью игнорирует поток.
  • То, что вы пытаетесь достичь, на самом деле является идеальным вариантом для Flexbox.

.fullscreenholder {
  display: flex;
  justify-content: space-around;
  width: 100vw;
  height: 100vh;
  border: 10px solid #ff0000;
}

.fullscreenholder h1 {
  margin: auto;
}
<div class="fullscreenholder">
  <h1>Example</h1>
</div>

Что здесь важно?

  1. Я изменил ваши widthи heightсвойства на 100vw и 100vh соответственно. Это означает, что он будет занимать 100% высоты по вертикали и 100% от вертикальной ширины , а также полноэкранный режим независимо от размера экрана.
  2. Сделал fullscreenholderгибкий контейнер с display:flex;.
  3. Дал вам, h1 margin:auto;который говорит flexbox, чтобы занять все пространство, окружающее элемент, с разницей, доведя h1до идеального вертикального и горизонтального центрирования.

1

Вы ищете что-то вроде этого?

.fullscreenholder {
  position: absolute;
left: 0;
top: 0;
margin-left: 0;
margin-top: 0;
width: 1920px;
overflow: visible;
padding: 10px;
height: 1080px;
border: 10px solid #ff0000;
}
<div class="fullscreenholder">example</div>

    


1

прежде всего, использовать проценты для установки элемента .fullscreenholder для размещения относительно окна просмотра, который будет всегда оставаться центрированным независимо от экранирования и использовать преобразование для смещения позиции по своему размеру.

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

я не знаю, зачем вам это нужно именно так, но вот как вы это делаете:

(Кстати, если вам нужно, чтобы это выглядело «хорошо» на всех экранах, вы должны изменить ширину и высоту .fullscreenholder и максимальную ширину и максимальную высоту и дать ему ширину: 100% и высота: 100%, что будет поведение реагирует)

body {
  position: relative;
  min-width: 1920px;
  min-height: 1080px;
}

.fullscreenholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1920px;
  height: 1080px;
  border: 10px solid #ff0000;
  overflow: hidden;
  color: #fff;
}

.inside {
  position: absolute;
  width: 200px;
  height: 200px;
  right: 0;
  top: 0;
  background: blue;
  color: #fff;
}
<div class="fullscreenholder">
  <div class="inside">example</div>
</div>

HTML, CSS, CSS-положение,
Похожие вопросы