Original subtitles

1 1

We're now going to talk 2

2

about element positioning. 3

3

So far, all our elements were 4

4

relative positioned elements. 5

5

That means that their position on the Web page 6

6

is determined by other elements. 7

7

Now, elements with absolute position 8

8

can be positioned anywhere we want 9

9

inside their parent elements. 10

10

But I guess I better show you how it works, right? 11

11

Now back to our Web page. 12

12

Suppose we wanted to know which date 13

13

this article was written. 14

14

In order to do that we can position a date, 15

15

let's say in this location here, 16

16

and the easiest way to do that is probably 17

17

with absolute positioning. 18

18

But let's first start by create a little paragraph 19

19

where we could write that date. 20

20

I will write that right after the main heading for now, 21

21

but don't worry, we will position it then later. 22

22

So, it will be a paragraph, 23

23

and I will call it just date. 24

24

And let's say, March 11th, 2015. 25

25

So, how does it look? 26

26

Not quite as we wanted, right? 27

27

So, let's format it to put it exactly where we want it. 28

28

So, back to the CSS, down here I will add 29

29

a date class, as you already know how to do. 30

30

Now the first thing we need to do is 31

31

to ensure that the parent element is 32

32

a relative-positioned element. 33

33

In this case, the parent of this p element 34

34

is this blog-post div. 35

35

So, let's edit it and say that it's 36

36

position is relative. 37

37

All right, now we can format this class here. 38

38

So, date as position absolute and not relative. 39

39

And now, to put it exactly where we want it, 40

40

we just say top zero, which means that it's 41

41

right at the top with zero pixels between 42

42

the top and the element, and right also zero, 43

43

which means that there is no distance 44

44

between the right side of the 45

45

parent container and the element. 46

46

And there it is in a top right corner, just as we said. 47

47

Now it's not quite where we want it yet, right? 48

48

So, you remember this pairing between 49

49

this box and this was 30 pixels, right? 50

50

So what we can do is to say that this element 51

51

should have 30 pixels to the right side, 52

52

which will move it all the way to this place here. 53

53

And now it also seems a little bit 54

54

too much at the top, so we can say that 55

55

there should be a distance of 10 pixels. 56

56

So, back in the CSS, the top is now 10 pixel 57

57

and right, let's say 30 pixels. 58

58

And there it is. 59

59

Exactly as we wanted. 60

60

All right, so, this is absolute positioning. 61

61

It's very easy and very straightforward. 62

62

We just have to ensure that the parent element 63

63

is relative and that the absolute element 64

64

has a position property set to absolute. 65

65

As always, more on that later, 66

66

when we will be working on our 67

67

big big website project.