Изменения позиционирования

[aqua.77]

Есть контейнер DIV с двумя блоками Р которые позиционированы относительно левой стенки контейнера, я захотел переместить первый блок относительно правой стенки, но не получается. Почему так происходит?

<div>
<p class="q1"></p>
<p></p>
</div>

div{
	width:500px;
	height:500px;
	border:1px black solid;
	position:relative;
}
p{
	position:absolute;
	left:0;
	top:0;
	width:50px;
	height:50px;
	border:1px black solid;
}
div p:first-child {
	right:110px;
}

 

[by chris]

@aqua.77, нужно отменить прижатие слева. left: auto;

 

[Anton_1983]

Мда, действительно, так работает : 

p:first-child {    
    left: auto;    
    right: 110px;
    top: 50px;
    background-color: gray;
}

 

... вот только непонятно почему. Ведь здесь приоритет больше и должно по идее перекрывать заданное для абзацев в общем. Даже с !important не работает)   или здесь момент противоречия?

Edited November 19, 2016 by Anton_1983

[SelenIT]

Момент противоречия. Когда вы требуете, чтобы у абзаца левый край был прижат к краю контейнера, ширина была 50px (через стили для всех абзацев) И при этом правый край тоже был прижат к краю контейнера (через более специфичный стиль) — при ширине контейнера, отличной от 50px, выполнить все 3 требования невозможно. Чем-то одним приходится пренебречь. Авторы CSS-стандарта решили, что пренебречь следует указанием right…

[aqua.77]

1 час назад, SelenIT сказал:

CSS-стандарта

Есть этот сайт на русском?

[by chris]

9 минут назад, aqua.77 сказал:

Есть этот сайт на русском?

Попробуй найди компетентного переводчика. Надо ведь не просто перевести, а осмысленно и качественно. Разве что, @SelenIT - эту задачку можно доверить. Только это дело не благодарное получится. Работы много, а профита мало)

[Anton_1983]

30 минут назад, SelenIT сказал:

Момент противоречия. Когда вы требуете, чтобы у абзаца левый край был прижат к краю контейнера, ширина была 50px (через стили для всех абзацев) И при этом правый край тоже был прижат к краю контейнера (через более специфичный стиль) — при ширине контейнера, отличной от 50px, выполнить все 3 требования невозможно. Чем-то одним приходится пренебречь. Авторы CSS-стандарта решили, что пренебречь следует указанием right…

Хотя по логике css, "более специфичный стиль" должен был взять верх, если исходить из приоритетности стилей. Ведь задай бы мы всем параграфам цвет blue, то с помощью большей специфичности мы могли бы легко поменять его на yellow и при этом противоречие не выдало бы нам green)

[SelenIT]

Так противоречие между разными свойствами. Само по себе одновременное указание left и right ничему не противоречит, элемент просто будет растянут так, чтобы его края были в указанных местах. Но вот если при этом указана ещё и ширина — вот тут уже возникает противоречие. В примере с цветом именно переопределяется одно и то же свойство, но ведь смена цвета background-color в более специфичном селекторе не повлияет на цвет текста — так и тут.

Специфичность — она у селекторов, а не у свойств. Она определяет, какие значения свойств вообще дойдут до элемента. Но те, что дошли, уже равноправны и «не помнят», от каких селекторов они элементу достались. И конфликты между ними разруливаются на общих основаниях.