20//20 Собери Вечность. Пройдено 100% Вопрос

Курсы §11. Позиционирование
1

`Этот код имеет право на жизнь?

Испытание: собери слово «вечность»
`

body {
margin: 0;
padding: 20px;
}
.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
position: relative;
bottom: -180px;
right: -20px;
width: 50px;
height: 10px;
}
.h2 {
position: relative;
bottom: -160px;
right: -26px;
}
.h3 {
position: relative;
width: 40px;
bottom: -200px;
right: -92px;
}

/* вертикальные элементы /
.v {
position: absolute;
left: 20px;
bottom: 40px;
width: 10px;
height: 50px;
}
.v1 {
position: absolute;
left: 60px;
}
.v2 {
position: absolute;
left: 100px;
}
.v3 {
position: absolute;
left: 140px;
}
.v4 {
position: absolute;
left: 180px;
}
.v5 {
position: absolute;
left: 200px;
}
/ уголки */
.corner-top {
position: absolute;
bottom: 70px;
right: 80px;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
}

.corner-bottom {
position: relative;
bottom: -190px;
right: 2px;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
}

/* лого */
.logo {
position: absolute;
left: 87px;
top: 80px;
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
}`

2

Не очень вариант ваш. Для .v и .h должно быть position: relative;, а для остальных кусочков position: absolute;

3

знал что код не о чём.

4

Ничего страшного. Переделаете и будет лучше.

5

html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {position:absolute;
width: 50px;
height: 10px;
}
.h1{
bottom:60px;
left:20px
}
.h2{
bottom:80px;
left:80px;
}
.h3 {
width: 40px;
bottom:40px;
right:20px;
}

/* вертикальные элементы */
.v {
position:absolute;
width: 10px;
height: 50px;}

.v1{
bottom:40px;
left:20px;
}
.v2{
bottom:40px;
left:60px;
}
.v3{
bottom:40px;
left:100px;
}
.v4{
bottom:40px;
left:140px;
}
.v5{
bottom:40px;
left:180px;
}
.v6{
bottom:40px;
left:200px;
}

.corner-top {
bottom:70px;
left:150px;
position:absolute;
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;

}

.corner-bottom {
position:absolute;
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
bottom:50px;
left:150px;
}

/* лого */
.logo {
position:absolute;
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
bottom:116px;
left:87px;
}

6

на 100%

7

так у меня тоже код в этой теме на 100%, твой код здесь не уместен.

8

Первый вариант выполнила исключительно через relative, все сошлось. Прочитав комментарий, выполнила как просили, тоже на 100%.
Вопрос в следующем, что должно было натолкнуть на мысль, что лого и уголки лучше позиционировать через absolute?

9

Абсолютное позиционирование почти всегда неотделимо от относительного. То, что у родителя .scene относительное позиционирование, должно натолкнуть на мысль, что у дочерних будет абсолютное.

10

Вы пишете, что первый код “не очень”, т.к. .v и .h должны быть relative по позиционированию, а остальные кусочки - absolute. А почему? На что это принципиально влияет/может повлиять в будущем?

11

Не совсем правильно написала, спасибо за вашу внимательность.
Учитывая, что у родителя .scene относительное позиционирование, то логичнее слово “вечность” собирать с помощью абсолютного позиционирования.
А тот код действительно не очень, потому что абсолютное позиционирование перемешано с относительным, без понимания что и для чего нужно.

12

Ага, т.е. .scene остаётся в relative, а всё остальное - и .h, и .v, как общие, так и частные, с цифрой, в absolute? А в представленном коде “намешано” - т.е. вся ветвь h (в т.ч. с цифрами) - в relative, а v - в absolute, правильно я понял?

13

Да, всё правильно.

2 лайка
14

Хорошо. Спасибо и Вам за оперативность с ответом и доброжелательность! )

1 лайк
15

Да, вы совершенно правы, на тот момент, у меня не совсем было четкое понимание позииционирования, учел ваши коментарии и исправил, ещё раз спасибо за отклик.

1 лайк
16

/html {
padding: 0;
}

body {
margin: 0;
padding: 20px;
}

.scene {
position: relative;
width: 260px;
height: 260px;
background: none;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
}

div {
display: inline-block;
background: white;
}

/* горизонтальные элементы */
.h {
width: 50px;
height: 10px;
position: absolute;
}

.h1 {
bottom: 60px;
left: 20px;
}

.h2 {
bottom: 80px;
left: 80px;
}

.h3 {
width: 40px;
bottom: 40px;
left: 200px;
}

/* вертикальные элементы */
.v {
width: 10px;
height: 50px;
position: absolute;
bottom: 40px;
}

.v1 {
left: 20px;
}
.v2 {
left: 60px;
}

.v3 {
left: 100px;
}
.v4 {
left: 140px;
}
.v5 {
left: 180px;
}
.v6 {
left: 200px;
}

/* уголки */
.corner-top {
border: 15px solid white;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: transparent;
background: none;
position: absolute;
bottom: 70px;
left: 150px;
}

.corner-bottom {
border: 15px solid transparent;
border-top-width: 20px;
border-bottom-width: 0;
border-top-color: white;
background: none;
position: absolute;
bottom: 50px;
left: 150px;
}

/* лого */
.logo {
width: 64px;
height: 64px;
background: url(’/assets/course10/logo.png’);
position: absolute;
top: 80px;
left: 87px;
}
/
можно как-то прокомментировать и возможно внести какие-то поправки?

17

Замечаний нет, всё хорошо.

18

спасибо

19

Абсолютное позиционирование почти всегда неотделимо от относительного.

Это всего лишь способ задания точки отсчета координат и никак не означает, что и относительное будет неотделимо от абсолютного :slight_smile: нигде в теории не звучало, что если у родителя относительное позиционирование, то у дочернего обязательно должно быть абсолютное (если помните, задание 14/20 - несколько вложенных друг в друга блоков с относительным позиционированием).
К тому же, в описании задания сказано, что можно использовать “тот тип позиционирования и те приёмы позиционирования, которые вам больше понравились”.

20

Я имела в виду не совсем это. И речь шла не конкретно об этом задании. Я о том, что если у какого-то элемента на странице абсолютное позиционирование, то скорее всего у его родителя будет относительное.