Как работает эта логика системы координат, в css?

Question

[Сергей Марченко]

Есть iframe jsfiddle.net/RwpJx/1408
Я его подсмотрел, и не могу понять логику "системы координат", сам я не буб-бум в фронтенде и в математике тоже, но разобраться очень нужно.

Вот что мне допустим нужно сделать на изображении.

В моем понимании мне нужно всего 4 числа, а тут почему-то 6.
Пробовал просто перебирать так и не понял.

Comments

[Иван]

а где 6 чисел? вижу только 4

[Леонид Князев]

Про какую систему координат вы говорите? В вебе 0:0 это левый верхний угол.

[Сергей Марченко]

Иван,

#outerdiv 
{ 
width:756px; 
height:496px; 
overflow:hidden; 
position:relative; 
}

#innerIframe 
{ 
position:absolute; 
top:-246px; 
left:-149px; 
width:1280px; 
height:1200px; 
}

[Сергей Марченко]

Леонид Князев, Ну я просто значит так выразился.
Наверно правильно позиционирование правильнее сказать.

Answer 1

[Stalker_RED]

Там всего две координаты: top и left. А width и height это ширина и высота.

И вы перепутали местами числа в top и left.

Comments

[Сергей Марченко]

Так а зачем там в CSS два раза есть width и height

[Stalker_RED]

Сергей Марченко, Ширина и высота для #outerdiv и ширина и высота для #innerIframe. Вы совсем css не понимаете?

Попробуйте поменять эти числа на сотню-другую, посмотрите что получится.

[Леонид Князев]

Сергей Марченко, Потому, что там в CSS один width и height задан одному элементу, а второй width и height задан другому элементу.

[Сергей Марченко]

Так совпало, но это не мои данные.
Сейчас еще раз пересмотрю.

[Сергей Марченко]

Леонид Князев, То есть нужно только outerdiv задавать.

[Stalker_RED]

Сергей Марченко, вот набросал пример где более явно видны размеры jsfiddle.net/RwpJx/1409/embedded/result

[Сергей Марченко]

Stalker_RED, Леонид Князев,
Можете мне сформировать поисковой запрос? Я чувствую без этого ничего не выйдет.

[Stalker_RED]

Сергей Марченко, Начните с изучения html и css.
Вот подробная карта развития с нуля https://github.com/zualex/devmap

Вполне вероятно, что некоторые пункты вызовут отторжение, типа "зачем мне это знать/понимать, я же хочу делать %что-то другое%". Можете пропускать такие пункты или ознакамливаться совсем поверхностно, но на свой страх и риск.

[Сергей Марченко]

Stalker_RED, Я не из ваших, я гуманитарий. Мне просто из всего нужно понять как этот фрейм работает.

[Stalker_RED]

Сергей Марченко, окей, объясняю на пальцах.
у вас там div с id=outerdiv и внутри него iframe с id=innerIframe

Для обоих элементов прописаны какие-то стили.
Для outerdiv указана ширина и высота, и свойство overflow: hidden. Все что будет "торчать" за границы этого дива будет скрыто.

Для iframe тоже указана ширина и высота, и казан сдвиг по координатам (top и left). И размеры его значительно больше чем внешний див.

Представьте что у вас есть большой бумажный пакет (внешний див). В пакете прорезано окошко размером
width: 756px;
height: 496px;

В пакет кладем ipad или какой-то другой планшет (это ваш iframe) с размерами
width: 1280px;
height: 1200px;
и на этом планшете открыта страница.

затем планшет и сдвигаем влево и вверх на
top: -246px;
left: -149px;

результат видим в окошке. Можно скроллить, нажимать на ссылки, но видно не весь экран планшета, он как-бы обрезан по размеру окошка, еще и сдвинут.

[Сергей Марченко]

Stalker_RED,
А пакет бесконечный? От чего тогда top left отталкиваются?

[Gortyser]

Сергей Марченко, почитайте про position. Отталкивается от родительского элемента в случае с position:absolute и от исходного положения с position:relative;

[Сергей Марченко]

Все, я понял.
Спасибо, что потратили время.

Answer 2

[Иван]

Для начала нужно понять, что в данном примере есть 2 элемента: это внешний - div с id='outerdiv', или обертка, и внутренний - iframe с id='innerIframe'. Соответственно стили задаются отдельно для каждого блока. Для внешнего заданы только ширина и высота, и они ограничивают и внутренний контент этого блока (в нашем случае iframe с id='innerIframe'). Для внутреннего же задано абсолютное смещение как я полагаю чтобы не выводить меню и шапку. А вот ширина и высота внутреннего блока заданы такими для того чтобы браузер отрисовал содержимое iframe именно для такого размера экрана (1280x1200).

Comments

[Сергей Марченко]

Тогда что тут?
top:-246px;
left:-149px;

[Леонид Князев]

Сергей Марченко, Позиция верхнего левого угла у #innerIFrame

[Сергей Марченко]

Леонид Князев, Иван, Stalker_RED Все, я понял.
Спасибо, что потратили время.

[Сергей Марченко]

Иван, Stalker_RED, Леонид Князев,

А как тогда убрать этот отступ.