Положение кнопки абсолютно не работает должным образом

Может кто-нибудь объяснить, почему эта кнопка не расположена абсолютно справа? Я ожидаю, что это будет 3px от каждого края.

HTML:

<div class="wrapper">
    <button>Hello world</button>
</div>

CSS:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
}

Кроме того, как получается, что кнопка может выравнивать содержимое по вертикали?

Ответ 1

button, как и большинство элементов формы, является замененным элементом. Замещенные элементы ведут себя по-разному, чем обычные незаменимые элементы (такие как div), когда они абсолютно позиционируются. Следующие два пункта из раздел 10.3.8 из CSS2.1 применяются:

Используемое значение "width" определяется как для встроенных замененных элементов. Если "margin-left" или "margin-right" указано как "auto", его используемое значение определяется приведенными ниже правилами.
...

Если в этот момент значения слишком ограничены, игнорируйте значение для "left" (в случае, если свойство "direction" содержащего блока равно "rtl" ) или "right" (в случае, если "direction" - 'ltr') и решите для этого значения.

Ширина кнопки определяется не на основе указанных смещений, в отличие от неподписанных элементов, а содержимого самой кнопки. Поскольку используемое значение width не является автоматическим, а указанные значения left и right не являются автоматическими, значения перегружены и браузер вынужден игнорировать right, чтобы уважать width.

Если вы хотите, чтобы кнопка заполняла всю высоту и ширину обертки, не используйте абсолютное позиционирование. Вместо этого укажите 100% высоту и ширину на кнопке и используйте прописку на обертке, чтобы смещать кнопку:

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
    box-sizing: border-box;
}

.wrapper button {
    height: 100%;
    width: 100%;
}

<div class="wrapper">
    <button>Hello world</button>
</div>

Ответ 2

Вы можете использовать значение inherit/100% для свойств width и height css.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    padding: 3px;
}
.wrapper button {
    width: inherit;
    height: inherit;
}

Fiddle

ПРИМЕЧАНИЕ. Если вы хотите иметь размеры точно 300, то вычесть отступы. (который будет 294px)

Ответ 3

Вы можете использовать calc, чтобы получить точную ширину минус заполнение, которое вы получаете от позиционирования:

width: calc(100% - 6px);

JSFiddle

Ответ 4

используйте ниже css..

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
    padding: 3px
}
.wrapper button {
    position: absolute;
    top: 0;
    bottom:0;
    left:0;
    right:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
}

Ответ 5

Я думаю, что вы пытаетесь поместить кнопку в центр. Вы указали верхний и левый 3px, поэтому независимо от того, что вы определяете, нижняя и правая кнопки будут иметь 3 пикселя сверху и слева, игнорируя другие. Чтобы поместить кнопку в центр, используйте marginFirst определить ширину кнопки и установить marginLike thia

wrapper button{
  Width:100px;
   margin:0px auto;

}

не margin не работает с абсолютной позицией.

Ответ 6

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;width:97.5%;
    right: 3px;
}

Попробуйте это.

Ответ 7

Вам нужно установить ширину кнопки, чтобы она заполнила пробел.

Самый простой способ сделать это - установить его в правильный размер.

.wrapper {
    height: 300px;
    width: 300px;
    background-color: #f33;
    position: relative;
}

.wrapper button {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    right: 3px;
    height: 294px;
    width: 294px;
}