Now we'll learn how to use CSS
To really move things around.
Not just put them next to each other.
But to actually put things
On top of each other.
Here, we have a webpage
With a few headers, and images, and some
Paragraphs down here
And its currently all laid out with
The default positioning strategy
Which the browser uses
Which we call static or normal positioning
It just means that in line elements
Like images
Are laid from left to right
And block elements
Like headers and paragraphs
Are laid out from top to bottom
We can change that positioning strategy
Using the CSS position property
Let's try it on the landscape image
We'll type position, colon, and then
Relative for the value
The relative position strategy
Means position it how you normally would
But then offset it by some amount
Now, to tell the browser what amount
We want to offset by
We need to use some combination
Of four new CSS properties
Top, bottom, and left, and right
Like let's say we wanna have it be
Twenty pixels down
Say top twenty pixs
And ten pixels over
We'll say left ten pixs
So that's kind of neat,
But not really that neat
I wanna show you something waaay cooler
Absolute positioning
We can use it to take an element
Completely out of the normal flow
And put it anywhere on the screen
To do that
I will change relative
To absolute
On the landscape
And keep the top left
And you can see
That landscape is now
Hiding our images and dance party heading
And now we're going to fix that
Let's start with Winston
So we'll add a rule for Winston
And give Winston a position absolute
And then let me say
Top forty pixs
Oh, let's say top fifty pixs
And then left fifty pixs
Ok, that looks good
And hopper is really eager to get on top
As well
So let's say Hopper also needs
A position absolute
And let's say top thirty pixs
And left sixty pixs
Ok, so my goal is
To make it look like Hopper
Is kind of dancing in front of Winston
But right now it doesn't look that way
Because Winston is being drawn
On top of Hopper
To fix this,
I could either change the order of
The actual image tags
In the html
But a kind of better way is
To use the CSS z index property
We can use that to tell the browser
Exactly what order to draw
Elements in
By giving them differency
Indexes
So I'll start with a landscape
And give it a z index of one
And Winston goes on top with two
Hopper goes on top with three
Alright!
Now Hopper is dancing in front of Winston
Even if he doesn't like that
But he'll have to deal
But now we still have headings
And columns that are hidden
So let's see, let's try
And get the, maybe I want the
Dance party to be on top of everything
So I'm also gonna give that
Position absolute
And z index four
Ok, looks good
Maybe left ten pixs
Just move it over
Maybe, maybe a bit more
Alright, that looks good
Now, for the song lyrics
I actually just want them to
display underneath everything
So for those I'm thinking
Position relative and then
We could just do a top
Which is you know,
Would equal the height of the image
It would be two hundred twenty pixels
Alright, so that is looking really good
We've got a crazy dance party
Going on now
Now, if you pause a talkthrough
And try scrolling the page
You'll see that everything
Scrolls together
And the important thing is
That absolute positioning is relative
To the top of the webpage
So, as you scroll down the webpage
Things that were ten pixels
Top, are going to be moving off screen
Because you are going farther away from
The top of the webpage
Another option is
Fixed positioning
Which will actually make it seem like
Things don't move at all
And, if you want to try that out
We can just change
h1 from absolute to fixed
And now, pause and try scrolling
And you will see that
Dance party just stays in the same place
Because now, it is actaully
Relative to the top of the screen
The window
Ok, so we've managed to use
Three different position properties
To do some pretty cool stuff
When would we
Actually use absolute or fixed positioning
Well, you could use them
To make a game,
Like I did here
Because you'll want to layout all
The parts of the scene in the browser
But you can also use them
For normal webpages
Like on Khan Academy
We use absolute positioning for the models
That pop up in the middle of the page
And use fixed positioning
For the search box on out team page
So that it is always visible as you scroll
You probably won't use positioning
In every webpage
But when you do use it
You'll be really happy that it exists
Ahora vamos a aprender cómo usar CSS
para mover realmente las cosas.
No sólo poner unas junto a otras.
Sino en realidad poner las cosas,
encima de otras.
Aquí tenemos una página web,
con algunos encabezados, imágenes y
algunos párrafos aquí abajo.
Y en este momento todo está acomodado
con la estrategia de posicionamiento por defecto,
que usa el navegador
y que llamamos posicionamiento normal o estático.
Eso significa que los elementos en línea,
como las imágenes,
se ponen de izquierda a derecha.
Y los elementos en bloque,
como encabezados y párrafos,
se acomodan de arriba a abajo.
Podemos cambiar esa estrategia de posicionamiento,
usando la propiedad "position" de CSS.
Vamos a intentarlo con la imagen del paisaje.
Tecleamos "position:" y luego
ponemos el valor "relative".
La estrategia de posición relativa,
significa que lo pone donde lo haríamos normalmente
pero compensando un poco.
Ahora, para decirle al navegador, qué cantidad
queremos compensar,
necesitamos usar una combinación de
cuatro nuevas propiedades de CSS:
"Top" (arriba), "bottom" (abajo), "left" (izquierda) y "right" (derecha).
Por ejemplo, queremos que la imagen esté
veinte pixeles abajo.
Escribimos "top: 20 px"
Y aquí 10 pixeles,
y aquí escribimos "left: 10px".
Esto se ve muy ordenado,
pero en realidad no está tan ordenado,
Quiero mostrarles una manera mejor.
Posicionamiento absoluto.
Podemos usarlo para sacar un elemento
completamente del flujo normal,
y ponerlo en cualquier parte de la pantalla.
Para hacer eso, voy a cambiar "relative" por "absolute"
en el paisaje, y voy a dejar "top" y "left" como está.
Y pueden ver que el paisaje ahora está
ocultando nuestras imágenes y el encabezado que dice "Dance Party".
Vamos a arreglar eso ahora,
empezando por "Winston",
así que vamos a añadir una regla para "Winston"
para darle a "Winston" una posición absoluta.
Y luego vamos a decir
40 pixeles.
Oh, vamos a escribir arriba 40 pixeles,
y luego izquierda 50 pixeles,
Ok, eso se ve bien.
Y "Hopper" está realmente ansioso por estar arriba también.
Así que "Hopper" también necesita una posición absoluta.
Y vamos a escribir "top: 30px",
y "left: 60 px".
Ok, mi objetivo es
hacer que "Hopper" parezca que
está bailando enfrente de "Winston".
Pero en este momento no parece que lo esté haciendo,
porque "Winston" se está dibujando
encima de "Hopper".
Para arreglar esto,
podría cambiar el orden de
las etiquetas de las imágenes en el HTML,
pero una mejor manera de hacerlo es
usar la propiedad "z index" de CSS.
Podemos usar esta propiedad para decirle al navegador
el orden exacto en que debe dibujar
los elementos, al darles diferentes índices.
Así que empezaré con el paisaje
y voy a asignarle un "z index" de 1.
Y sigue "Winston" con 2,
y "Hopper" con 3.
¡Muy bien!
Ahora "Hopper" está bailando enfrente de "Winston",
aunque no le guste, pero lo tiene que hacer.
Pero todavía tenemos encabezados
y poemas que están ocultos.
Así que tratemos de...
tal vez quiero que "Dance party" quede por arriba de todo,
así que voy a asignarle posición absoluta.
Y "z index: 4".
Ok, se ve bien, podríamos poner "left: 10px"
y moverlo un poco, tal vez un poco más.
Muy bien, se ve bien.
Ahora para la letra de las canciones,
en realidad quiero que se desplieguen debajo de todo.
Así que para eso voy a cambiar
la posición a "relative" y luego
ponemos "top: ", que debe ser...
tan alto como la imagen, podría ser 220 pixeles.
Muy bien, en realidad esto se ve bien.
Ya tenemos una loca fiesta de baile.
Ahora, si pausas nuestra guía paso a paso,
y tratas de desplazar la página
verás que todo se desplaza al mismo tiempo.
Y lo importante es
que el posicionamiento absoluto es relativo
a la parte superior de la página web.
Así que si desplazas hacia abajo la página web,
las cosas que están 10 pixeles abajo de
la parte superior se van a salir de la pantalla,
porque estás yendo más lejos
de la parte superior de la página web.
Otra opción es el posicionamiento fijo.
Que en realidad hace que parezca que las cosas
no se mueven.
Y si quieres probar,
sólo tenemos que cambiar
"h1" de "absolute" a "fixed".
Y ahora, haz una pausa y trata de desplazar la pantalla
y verás que "Dance party" se queda en el mismo lugar,
porque ahora, en realidad
es relativo a la parte superior de la pantalla,
de la ventana.
Ok, hemos usado
tres propiedades diferentes de posicionamiento
para hacer cosas geniales.
En realidad ¿cuándo debemos usar
posicionamiento absoluto o fijo?
Bueno, podríamos usarlos
para hacer un juego,
como yo lo hice aquí,
porque querrías desplegar todas
las partes de tu escena en el navegador.
Pero también podrías usarlos
en páginas web normales
como Khan Academy.
Usamos posicionamiento absoluto para los modelos
que aparecen en el centro de la página.
Y usamos posicionamiento fijo
en el buscador de nuestra página
para que siempre esté visible aunque desplaces la página.
Probablemente no uses el posicionamiento
en cada página web,
pero cuando lo uses
estarás muy feliz de que exista.
ახლა ჩვენ ვისწავლით, როგორ გამოვიყენოთ CSS
ელემენტების გადაადგილებისთვის.
არა უბრალოდ ერთმანეთის გვერდით დასალაგებლად,
არამედ ერთმანეთის მიყოლებით
ერთი მეორეს შემდეგ დასაწყობად.
აქ გვაქვს ვებ-გვერდი
რამდენიმე სათაურითა და სურათებით და
კიდევ გვაქვს რამდენიმე აბზაცი
ეს ყველაფერი ახლა განლაგებულია
სტანდარტული წყობის მიხედვით.
რასაც ძირითადად იყენებს ბრაუზერი.
ჩვენ მას სტატიკურ ან ჩვეულებრივ განლაგებას ვუწოდებთ,
რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,
მაგალითად, სურათები,
განლაგებულია მარცხნიდან მარჯვნივ
ბლოკები კი, ისეთები, როგორც
სათაურები(ჰედერები) და აბზაცები
განლაგებულია ზემოდან ქვემოთ.
შეგვიძლია, შევცვალოთ განლაგების სტრატეგია
CSS-ის პოზიციონირების თვისების გამოყენებით
მოდი ვცადოთ ეს ამ სურათის მაგალითზე.
დავწეროთ: position:
და შემდეგ მნიშვნელობად მივუთითოთ relative
relative განლაგების სტრატეგია
ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ
შემდეგ კი რაღაც მანძილით დავაშოროთ
ახლა მივუთითოთ ბრაუზერს,
რა მანძილით გვინდა დაშორება
ამისთვის უნდა გამოვიყენოთ
CSS-ის ოთხი ახალი თვისების კომბინაცია
ზედა, ქვედა, მარცხენა და მარჯვენა.
მაგალითად, გვინდა დავაშოროთ
ოცი პიქსელით ქვემოდან
და კიდევ ათით...
დავუშვათ, ათით მარცხნიდან.
კარგია, არა?
მაგრამ კიდევ უფრო მაგარი რამე
შემიძლია გაჩენოთ.
კერძოდ, აბსოლუტური განლაგება.
ეს შეგვიძლია გამოვიყენოთ
თუ გვინდა ამოვიღოთ ელემენტი სტანდარტული წყობიდან
და ეკრანზე რომელიმე სხვა ადგილას დავსვათ.
ამისთვის
შევცვალოთ relative მნიშვნელობა
ჩავწეროთ absolute
მაგრამ დავტოვოთ
ზემოთა და მარცხენა თვისებები
როგორც ხედავთ
ახლა ჩვენი სურათი
ფარავს როგორც სხვა სურათებს, ასევე ჰედერს.
ეს არ გვაწყობს, გამოვასწოროთ.
დავიწყოთ უინსტონით.
დავამატოთ მისთვის წესი
position: absolute
და, დავუშვათ,
ზემოდან 40 პიქსელი
არა, 50 იყოს
და 50 მარცხნივ
აი, ახლა კარგია.
ჰუპერსაც უნდა ზემოთ
ამიტომ
მასაც მივანიჭოთ
position: absolute
თვისებები: top: 30
left:70
ჩემი მიზანია
ჩანდეს ისე, თითქოს ჰუპერი
უინსტონის ირგვლივ ცეკვავს.
მაგრამ ჯერ–ჯერობით კომპოზიცია ასე არ გამოიიყურება
იმიტომ რომ უინსტონი
ჰოპერის ზემოდან ხატია.
ამის გამოსასწორებლად
შემიძლია ან შევცვალო
სურათების თეგების თანმიმდევრობა
HTML-ში
მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები
CSS–ის z ინდექსის გამოყენებით
შეგვიძლია ვუთხრათ ბრაუზერს
რა თანმიმდევრობით
უნდა ჩახატოს ელემენტები
ამისთვის მათ სხვაობის
ინდექსები უნდა მიანიჭოს.
დავიწყოთ ლანდშაფტით.
მისი z ინდექსი იქნება 1
უინსტონის - 2
ჰოპერის – 3
კარგია!
ახლა ჰოპერი უინსტონის წინ ცეკვავს
მოსწონს ეს თუ არა
უწევს;
ახლა ვნახოთ, რა შეიძლება ვუყოთ დამალულ
ჰედერებსა და სვეტებს
აბა..
მინდა, რომ ეს ცეკვა
ყველაფერზე მაღლა იყოს განლაგებული
ამიტომ მივანიჭებ
აბსოლურ პოზიციას
და z ინდექს 4–ს
კარგია.
ასე ათი პიქსელით მარცხნივ რომ გადავიტანოთ
ან კიდევ ოდნავ მეტით
აჰა, ასე კარგია.
ახლა სიმღერის ტექსტს მივადგეთ.
მინდა, რომ ის ყველაფრის
ქვემოთ ჩანდეს უბრალოდ.
ამიტომ, მივანიჭოთ
შედარებითი პოზიცია
და დავაყენოთ ზედა ზღვარი
რომელიც სურათის სიმაღლეს
უნდა უდრიდეს;
რაც 220 პიქსელია
მშვენიერია, მომწონს, როგორც გამოვიდა
მშვენიერი წვეულება
მოგვიწყვია.
ახლა თუ დააპაუზებთ ვიდეოს
და ჩამოწევთ გვერდს
დაინახავთ, რომ ყველაფერი
ერთად მოძრაობს
მნიშვნელოვანი კი ის არის,
რომ აბსოლუტური პოზიცია დამოკიდებულია
გვერის ზემოთა ზღვარზე
ამიტომ, როცა გვერდს სქროლავთ
ყველაფერი, რაც ზემოთ იყო
ნელ–ნელა ქრება,
იმიტომ რომ თქვენ შორდებით
გვერდის ზემოთა ნაწილს
მეორე ვარიანტია
ფიქსირებული პოზიცია,
ამ შემთხვევაში გამოჩნდება თითქოს
არაფერი არ მოძრაობს საერთოდ
თუ გინდათ სცადოთ,
უბრალოდ შეცვალეთ
h1 აბსოლუტურიდან ფიქსირებულზე
მერე კი დააპაუზეთ და ჩამოსქროლეთ
დაინახავთ, რომ
ჩვენი წვეულება იმავე ადგილას რჩება
იმიტომ რომ ახლა ის დამოკიდებულია
ეკრანის ზედა ზღვარზე,
ბრაუზერის ფანჯარაზე.
აი, ასევ ისწავლეთ
სამი სხვადასხვა პოზიციის გამოყენება.
და შეგვიძლია ბევრი მაგარი რამის გაკეთება
შეიძლება გაინტერესებთ,
როდის ვიყენებთ აბსოლუტურ და ფიქსირებულ პოზიციებს?
ჰმ.. მაგალითად,
თამაშის შექმნისას
როგორც აქ გავაკეთე ეს
როცა სცენის ყველა ნაწილის
გამოჩენა გინდათ ბრაუზერში
მაგრამ ასევე გამოიყენეთ
ჩვეულებრივი ვებ–გვერდებისთვის
მაგალითად, ხანის აკადემიაზე
იმ მოდულებისთვის, გვერდის შუაში რომ ხტება
აბსოლუტურ პოზიციას ვიყენებთ.
ფიქსირებულს კი ვიყენებთ
ძებნის ველისთვის ზოგ გვერდზე
რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო მისი გამოყენება
პოზიციები შეიძლება არ გამოიყენო
ყოველ გვერდზე
მაგრამ როცა გამოიყენებ,
ძალიან გაგიხარდება მათი არსებობა.
이제 우리는 CSS를 이용해서
어떤 것들을 이동시켜 볼 거에요
그냥 옆에 나란히 놓는 것 말고요
실제로 어떤 것들을
서로 겹치게 하는 것 말이죠
여기 웹페이지가 있어요
헤더 몇 개와 이미지들
그리고 여기 아래에 몇 개의 문단이 있어요
이것들은 배치되어 있어요
브라우저의 기본 배치대로요
우리는 이걸 정적인 혹은 일반적인 배치라고 부르죠
즉 줄 요소(inline)들은
그러니까 이미지 같은 것들은
왼쪽에서 오른쪽으로 배치되어 있고
구역 요소들(block)들은
그러니까 헤더나 문단 같은 것들은
위에서부터 아래로 배치되어 있어요
우리는 이런 배치 규칙을 바꿀 수 있어요
CSS 위치 속성을 이용해서 말이죠
이 풍경 이미지로 한번 해볼게요
'position: ' 라고 쓰고
값으로는 relative를 쓰세요
상대적인 위치 규칙이라는 것은
일반적인 방식으로 배치하지만
대략적인 위치는 주는 거에요
브라우저에게 어느 정도로
위치를 주고 싶은지 지정하려면
우리는 어떤 조합을 사용해야 해요
네 개의 새로운 CSS 속성으로 된 조합 말이죠
위와 아래 그리고 왼쪽과 오른쪽으로요
예를 들어 우리가 원하는 건
아래 방향으로 20픽셀
그러니까 top은 20픽셀
그리고 10픽셀 옆으로
그러니까 left는 10픽셀
이건 좀 깔끔해 보이긴 하지만
그렇게 깔끔하진 않아요
저는 더 멋진 걸 보여주고 싶어요
절대적 위치에요
이 규칙은 요소들을
일반적인 방법을 완전히 벗어나
화면의 어디든 배치할 수 있어요
이걸 하려면
relative를
absolute로 바꾸고
이 풍경 그림에서요
top과 left는 그대로 둘게요
이제 보일거에요
저 풍경 그림이
다른 이미지와 'Dance Party'를 가리고 있죠
이걸 이제 수정해볼거에요
윈스턴 그림으로부터 시작해보죠
윈스턴 그림에 규칙을 추가할 거에요
그리고 윈스턴에게 절대 위치를 줄 거에요
그럼 이렇게 하죠
top은 40픽셀
아니에요 top은 50픽셀
left는 50픽셀
괜찮아 보이네요
호퍼도 위로 올라가고 싶어해요
호퍼도 필요할 거에요
절대 위치를요
그리고 top은 30픽셀
left는 60픽셀
좋아요 제 목표는
호퍼가 윈스턴 앞에서 춤추는 것처럼 보이게 하는거에요
하지만 지금은 그렇게 보이지 않아요
왜냐하면 윈스턴이
호퍼의 위에 그려져 있기 때문이죠
이걸 수정하려면
실제 이미지 태그의 순서를 바꿀 수 있어요
HTML에서의 순서 말이죠
하지만 더 나은 방법은
CSS의 z축 속성을 사용하는 거에요
이걸 이용하면 브라우저에게
요소들을 그릴 순서를 알려줄 수 있어요
z축 순서를 다르게 해주면 돼요
풍경 그림으로 시작해보죠
z축 값으로 1을 줄거에요
윈스턴은 그 위에 올라가니까 2를 주고
호퍼는 그 위에 올라가니까 3을 줄게요
좋아요!
이제 호퍼는 윈스턴 앞에서 춤추고 있네요
호퍼가 별로 좋아하지 않을지도 모르지만요
그치만 호퍼는 춤춰야해요
여기 헤딩이 아직 가려져있고
그리고 문단들도 가려져 있어요
그러면 이렇게 해보죠
이걸 가지고
저는 'Dance Party'가 가장 위에 있게 하고 싶어요
그래서 여기도
절대 위치를 줄거에요
그리고 z축 값은 4를 주고요
괜찮네요
왼쪽으로 십 픽셀만 옮길게요
살짝 옮겨줘요
조금만 더요
좋아요 괜찮네요
이 노래 가사는
전 사실 이 가사가
가장 아래에 있었으면 좋겠어요
그래서 저는
상대적인 위치를 줘서
위쪽 위치만 주는 거에요
그러니까 그건
이미지의 높이와 같겠네요
그러면 220픽셀이겠네요
좋아요 정말 괜찮아 보여요
우리는 열광적인 댄스 파티를 열었어요
이제 이 프로그램을 멈추고
페이지를 스크롤 해보세요
이 모든 것들이
함께 움직이는게 보일 거에요
가장 중요한 점은
절대적 위치는
웹페이지의 맨 위에 상대적이라는 거에요
그러니까 웹페이지를 아래로 내리면
top이 10픽셀 이었던 것들은
화면에서 벗어날 거에요
왜냐하면 여러분은
웹페이지의 맨 위와 멀어지고 있으니까요
다른 선택지는
고정 위치에요
이건 전혀 움직이지 않는 것처럼 보이게 해줄 거에요
이걸 한번 해보고 싶다면
h1을 'absolute'에서 'fixed'로 바꿔보죠
이제 프로그램을 잠시 멈추고 스크롤을 해보세요
그러면 보일 거에요
'Dance Party'는 항상 같은 곳에 있다는걸요
왜냐하면 이젠
화면의 맨 위와 상대적이 되었으니까요
바로 이 창요
좋아요 우리는 이제
세 개의 위치 속성을 사용하는 법을 배웠어요
더 멋진 것들을 해볼 수 있을 때
우리가 실제로
절대위치나 고정위치를 사용할 수 있을 때요
여러분은 이것들을
게임을 만들 때 쓸 수 있어요
제가 여기서 한 것 처럼요
왜냐하면 여러분은
브라우저의 모든 부분을 배치하고 싶을 거니까요
하지만 이럴 때도 사용할 수 있어요
일반적인 웹페이지에서
예를 들어 칸아카데미 같은 곳 말이죠
우리는 절대 위치를 이용할 수 있어요
페이지 가운데의 팝업창을 만들 때 말이죠
그리고 고정 위치를 이용할 수 있어요
팀 페이지의 검색창에 말이죠
그래서 스크롤해도 항상 보일 수 있게요
여러분은 이 위치 배치를
모든 웹페이지에서 사용하진 않을 거에요
하지만 이걸 사용할 때면
여러분은 이게 있어서 정말 기쁠거에요
Nauczymy się, jak używać CSS
do przemieszczania elementów.
Nie tylko do szeregowania.
Będziemy nakładać
jedne na drugie.
Tu mamy stronę
z paroma nagłówkami, obrazkami
i akapitami.
Na razie są ułożone
wg pozycjonowania domyślnego,
którego używa przeglądarka.
To tzw. pozycjonowanie statyczne lub normalne.
Elementy śródliniowe,
np. obrazy,
są ustawione od lewej do prawej,
A elementy blokowe,
np. nagłówki i akapity,
są ułożone pionowo.
Możemy zmienić ten układ,
korzystając z własności CSS „position” (pozycja).
Wypróbujmy to przy zdjęciu.
Piszemy „position:”,
a potem wartość względną.
W metodzie pozycji względnej
rozmieszczacie elementy normalnie,
a potem przesuwacie o jakąś wartość.
Żeby zawiadomić przeglądarkę
o tej wartości,
użyjemy jakiejś kombinacji
czterech nowych właściwości CSS:
góra, dół, lewo, prawo.
Powiedzmy, że chcemy mieć nasz element
20 pikseli niżej.
Napiszemy top: 20 pikseli.
Przesuniemy 10 pikseli w bok.
Piszemy: 10 pikseli w lewo.
To jest fajne,
ale nie aż tak.
Pokażę wam coś znacznie lepszego:
pozycjonowanie bezwzględne.
Możemy wyciągnąć element
z układu
i umieścić go gdziekolwiek.
W tym celu
zmienię „relative” (względne)
na „absolute” (bezwzględne)
przy naszym krajobrazie.
Górę i lewą stronę zachowam.
Jak widzicie,
krajobraz zasłania
obrazek i nagłówek „Impreza taneczna”.
Poprawmy to.
Zacznijmy od Winstona.
Dodamy regułę
pozycjonowania bezwzględnego.
Dajmy, powiedzmy,
„góra: 40 pikseli”.
Albo niech będzie 50.
I lewa 50.
Dobrze to wygląda.
Hopper (Skacząca) chce być na wierzchu.
Ona także.
Jej też określimy
pozycję bezwzględną.
Powiedzmy, góra: 30 pikseli,
a lewa: 60 pikseli.
Niech to sprawia wrażenie,
jakby Hopper
tańczyła przed Winstonem.
Na razie tak to nie wygląda,
bo Winston znajduje się
na wierzchu.
Żeby to poprawić,
mogłabym zmienić kolejność
znaczników „image”
w HTML-u,
lepiej jednak będzie
skorzystać z właściwości CSS „z-index”.
Powiemy przeglądarce,
w jakiej kolejności
ustawiać elementy,
nadając im
z-indeksy.
Zacznijmy od krajobrazu
i nadajmy mu numer 1.
Na to - Winston z dwójką,
a na wierzch Hopper, trzecia.
Dobrze!
Teraz Hopper tańczy przed Winstonem,
chociaż nie ma ochoty.
Trudno, musi!
Jednak niektóre nagłówki
i kolumny są ukryte.
Spróbujmy…
chcę umieścić nagłówek
„Impreza taneczna” na wierzchu.
Określę więc dla niego
pozycję bezwzględną
i nadam mu numer 4.
Dobrze.
Może 10 pikseli w lewo.
Przesunę.
Może jeszcze trochę.
Teraz dobrze.
A tekst piosenki
niech wyświetla się
poniżej całej reszty.
Dla tych elementów
określę pozycję bezwzględną.
Można określić tylko górę,
która, jak wiecie,
będzie równa wysokości obrazka.
To 220 pikseli.
Teraz wygląda to dobrze.
Szalona impreza taneczna
na całego!
Zatrzymajcie teraz film
i spróbujcie przewinąć w dół.
Zobaczycie, że wszystko
przewija się razem.
Ważna sprawa:
pozycjonowanie absolutne
odnosi się do góry strony.
Gdy więc przewijacie,
to, co było 10 pikseli od góry,
zniknie z ekranu,
bo oddalacie się
od góry strony.
Inna możliwość
to pozycjonowanie ustalone.
Będzie wyglądało tak,
jakby elementy się nie ruszały.
Żeby to wypróbować,
zmienimy
„absolute” na „fixed” w nagłówku „h1”.
Zatrzymajcie film i spróbujcie przewijać.
Zobaczycie,
że „Impreza taneczna” nie zmienia miejsca.
Bo teraz jej pozycja
odnosi się do góry ekranu,
okna.
No dobrze. Wykorzystaliśmy
trzy właściwości pozycjonowania
i zrobiliśmy fajne rzeczy.
Kiedy używamy
pozycjonowania bezwzlędnego lub ustalonego?
Można je zastosować,
robiąc grę,
jak ja tutaj,
żeby rozłożyć elementy
scenki w przeglądarce.
Można też stosować to
do zwyczajnych stron,
np. w Khan Academy.
Pozycjonowanie bezwzględne
stosujemy do modeli na środku,
a pozycjonowanie ustalone
do pola przeszukiwania.
Zawsze będzie widoczne.
Nie będziecie używać pozycjonowania
na każdej stronie,
ale jeśli już,
to będziecie zadowoleni, że można.
Agora vamos aprender como usar CSS
para realmente mover as coisas.
Não apenas colocá-las próximas uma da outra,
mas para realmente colocá-las
uma sobre a outra.
Aqui, temos uma página
com alguns cabeçalhos, imagens e alguns
parágrafos embaixo.
E atualmente está alinhada
com o posicionamento padrão
que o navegador usa,
que chamamos de posicionamento estático ou normal.
Isso significa que elementos alinhados em linha,
como imagens,
são dispostos da esquerda para a direita
e elementos de bloco,
como cabeçalhos e parágrafos,
são dispostos de cima para baixo.
Podemos mudar esse posicionamento padrão
usando a propriedade "position" do CSS.
Vamos testar isso com a imagem da paisagem.
Vamos digitar "position", dois pontos e
"relative" para o valor.
O uso do posicionamento "relative"
significa que as posicionará como normalmente faria,
mas dá uma deslocada em alguma quantidade.
Agora, para dizer ao navegador a quantidade
que queremos deslocar,
precisamos usar algumas combinações
de quatro novas propriedades de CSS:
"Top", "bottom", "left" e "right".
Digamos que queremos que ela tenha
vinte pixels pra baixo.
Digite: "top: 20px"
e mais 10 pixels pela esquerda,
digamos: "left:10px".
Está meio bancana,
mas não muito.
Eu quero te mostrar algo bem mais legal,
o posicionamento absoluto.
Podemos usá-lo para deixar um elemento
completamente fora do fluxo normal
e colocá-lo em qualquer lugar da tela.
Para fazer isso,
vou mudar de "relative"
para "absolute"
na imagem da paisagem
e manter as propriedades "top" e "left".
E você pode ver
que a paisagem agora está
ocultando nossas imagens e a dança.
Agora, vamos arrumar isso.
Vamos começar pelo Winston.
Vamos adicionar uma regra para o Winston
e atribuir-lhe o posicionamento "absolute"
e deixe-me colocar
"top" quarenta pixels.
Bem, melhor "top" cinquenta pixels
e cinquenta pixels para "left".
Ok, parece bom.
Hopper está ansioso para ficar no topo também.
Vamos dizer que Hopper também precisa
de posicionamento "absolute"
e vamos deixar "top" com trinta pixels
e "left" com sessenta pixels.
Ok, meu objetivo é
fazer parecer que Hopper
esteja dançando em frente a Winston.
Mas agora não parece assim
porque Winston está sendo desenhado
sobre Hopper.
Para arrumar isso,
eu poderia mudar a ordem das
tags das imagens
no HTML,
mas uma maneira melhor é
usar a propriedade "z-index" do CSS.
Podemos usá-la para dizer ao navegador
exatamente em qual ordem desenhar os elementos,
dando-lhes diferentes índices em z.
Então vou começar pela paisagem
e dar um "z-index" de um
e Winston vai acima com dois.
Hopper no topo com três
Certo!
Agora Hopper está dançando na frente do Winston.
Mesmo que ele não goste disso,
mas ele terá que lidar com isso.
Mas agora ainda temos cabeçalhos
e colunas que estão escondidas.
Então vejamos, vamos tentar
e talvez eu queira que
a dança esteja acima de tudo,
então também vou dar-lhe
um posicionamento "absolute"
e um "z-index" de quatro.
Ok, parece bom.
Talvez "left" 10 pixels.
Apenas mova um pouco
Talvez, um pouco mais
Tudo bem, parece bom
Agora, para letra da música,
quero apenas que ela
apareça abaixo de tudo.
Para isso, estou pensando
usar a posição "relative" e então
podemos usar o "top"
que vocês sabem,
igualaria a altura da imagem.
Seria de duzentos e vinte pixels.
Tudo bem, parece muito bom.
Teremos uma festa bem doida rolando.
Agora, se você para o vídeo
e tentar rolar a página
verá que tudo se move junto e
o importante é que
o posicionamento "absolute" é relativo
ao topo da página.
Conforme você rola a página para baixo
quem tinha 10 pixels em "Top",
vai sumir da tela,
porque você está se distanciando
do topo da página
Outra opção é
usar o posicionamento "fixed".
Isso fará com que pareça que
as coisas não se movem de jeito nenhum
e se você quiser tentar isso,
podemos mudar apenas
H1 de "absolute" to "fixed",
parar e tentar rolar a página
Você verá que
a dança fica no mesmo lugar
Porque agora ela está na verdade
relativa ao topo da tela, da janela.
Ok, conseguimos usar
três diferentes propriedades de poscionamento
para fazer umas coisas bem legais
Quando deveríamos
usar o posicionamento "absolute" ou "fixed"?
Bem, você pode usá-los
para fazer um jogo,
como eu fiz aqui
Porque você vai querer usar todas
as partes da cena no navegador
Mas você também pode usá-las
para páginas normais,
como na Khan Academy.
Usamos posicionamento "absolute" para modelos
que pulam no meio da página
e usamos posicionamento "fixed"
para a caixa de busca na seção de equipe
Para que esteja sempre visível quando você rolar a página.
Você provavelmente não usará posicionamento
em todas as páginas,
mas quando usá-lo
ficará feliz que isso existe.
Legendado por [Valter Bigeli] Revisado por [Carlos A. N. C. R.]
Зараз ми вивчимо, як використовуючи CSS,
можна переміщати об'єкти.
Не просто ставити їх один біля одного,
а справді розміщувати їх один на одному.
Тут ми маємо веб-сторінку
з декількома заголовками, зображеннями
і декількома абзацами ось тут.
І всі вони зараз розставлені
за стандартним принципом розміщення,
яку використовує браузер
і яку ми називаємо статичне або нормальне розміщення.
Це означає, що рядкові елементи,
такі як зображення,
розміщені зліва направо,
а блокові елементи,
такі як заголовки і абзаци,
розміщені з верху до низу.
Ми можемо змінити цей принцип розміщення
за допомогою властивостей розміщення CSS.
Спробуймо це зробити на цьому зображенні пейзажу (landscape).
Ми напишемо "position" (розміщення), двокрапку
і значення "relative" (відносний).
Відносний принцип розміщення означає:
"Розмісти його, як зазвичай,
але потім змісти його на певну кількість одиниць".
Щоб сказати браузеру, на яку кількість одиниць
потрібно змістити об'єкт,
ми маємо використати поєднання
чотирьох нових властивостей CSS:
Top (верх), bottom (низ) , left (лівий бік), і right (правий бік).
Скажімо, ми хочемо, щоб зображення
було на 20 пікселів нижче.
Напишімо: top: 20 px,
І ще на 10 пікселів вліво...
Ми напишемо: left: 10px.
Це достатньо точно,
але не ідеально точно.
Я хочу показати вам щось значно крутіше.
Абсолютне розміщення.
Ми його використовуємо, щоб
забрати елемент зі звичного русла
і поставити його будь-де на екрані.
Щоб зробити це,
Я зміню "relative"
на "absolute"
на цьому пейзажі,
і збережу його у лівому верхньому куті.
І ви можете побачити,
що тепер пейзаж
перекрив наші зображення і заголовок "dance party".
І зараз ми це виправимо.
Почнімо з Вінстона (winston).
Ми додамо йому правило
і напишемо в ньому "position: absolute",
і потім, скажімо,
верх: 40 пікселів,
оу, краще 50 пікселів.
Ліва сторона: 50 пікселів.
Гаразд, так виглядає добре.
І Хопер (hopper) також дуже хоче
залізти наверх.
Тому ми також дамо Хоперу
абсолютне розміщення
і напишемо: верх: 30 пікселів
і зліва: 60 пікселів.
Добре, моя мета
зробити так, наче Хопер
танцює перед Вінстоном.
Але зараз це так не виглядає,
тому що Вінстон намальований
поверх Хопера.
Щоб виправити це,
я можу змінити порядок розміщення
тегів в коді HTML.
Але існує кращий спосіб —
використати властивість CSS "z-index".
Ми можемо використати її, щоб сказати браузеру,
в якому саме порядку
розміщувати елементи,
надавши їм різні індекси.
Я почну з пейзажу
і дам йому "z-index" 1.
Далі йде Вінстон з цифрою 2
і Хопер вилазить нагору з цифрою 3.
Чудово!
Тепер Хопер танцює перед Вінстоном,
навіть якщо останньому це не подобається...
але йому доведеться змиритись.
Але в нас досі є приховані заголовки і текст.
Тому... спробуймо поставити...
Можливо, я хочу, щоб
заголовок "Dance party" був зверху над усім.
Тому я додам йому
абсолютне розміщення
і "z-index" 4.
Так виглядає добре.
Можливо, лівіше на 10 пікселів.
Просто пересунемо його трохи.
Може, трошки більше.
Чудово, так це все має гарний вигляд.
Тепер, слова пісні.
Я насправді хочу,
щоб вони відображалися знизу під всім.
Тому я думаю тут скористатись
відносним розміщенням
і потім просто додати значення верху,
яке, як ви знаєте,
буде дорівнювати висоті зображення.
Це буде двісті двадцять пікселів.
Гаразд, тепер виглядає справді добре.
У нас зараз відбувається справді драйвова вечірка.
Зараз, якщо ви зупините відео і спробуєте прокрутити сторінку,
ви побачите, що все прокручується разом.
І важливим є те,
що абсолютне розміщення є відносним до верху сторінки.
Тому, коли ви будете прокручувати сторінку вниз,
об'єкти, які мали 10 пікселів зверху,
не залишатимуться на екрані,
тому що ви рухатиметесь далі вниз.
Ще однією можливістю
є фіксоване розміщення (fixed),
яке буде виглядати так, наче
елементи не рухаються взагалі.
І якщо ви хочете це випробувати,
ми можемо просто змінити
h1 з абсолютного на фіксований.
А тепер поставте на паузу відео і спробуйте
прокрутити сторінку, і ви побачите,
що напис "Dance party" залишається на одному й тому ж місці.
Тому що зараз він є відносним
до верху самого екрана, вікна.
Гаразд, ми навчились, як використовувати
три різні властивості розміщення,
щоб робити справді класні речі.
Що ж, коли ми використовуємо
абсолютне і фіксоване розміщення?
Ви можете використовувати його,
щоб зробити певну гру,
як я зробила тут,
тому що ви захочете розмістити
усі частини дійства в браузері.
Але ви також можете використовувати їх
і для звичайних веб-сторінок,
таких як на Khan Academy.
Ми використовуємо абсолютне розміщення для моделей,
які розташовані посередині сторінки,
а фіксоване розміщення
для поля пошуку на сторінці команди,
щоб його завжди було видно під час прокрутки.
Напевно, ви не будете використовувати
розміщення на кожній сторінці,
але коли використовуватимете,
ви будете дуже щасливі, що така можливість існує.
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"