# data[].attributes.attachment_link.readable_text
Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:
Click on the "Try it Yourself" button to see how it works.
HTML Examples

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!
Go to HTML Examples!
HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

HTML Quiz Test

Test your HTML skills with our HTML Quiz!
Start HTML Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

HTML References

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.description
Online interactive HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more.

# data[].attributes.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
Want to learn to more HTML & CSS, or study other topics? Find the right course for you.

Develop & Style Websites

Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.

Join the Newsletter

To stay up to date and learn when new courses and lessons are posted, please sign up for the newsletter-spam free.

# data[].attributes.attachment_link.description
Want to learn to more HTML & CSS, or study other topics? Find the right course for you. Develop & Style Websites Learn to Code HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.

# data[].attributes.attachment_link.title
A Complete Guide to Flexbox | CSS-Tricks

# data[].attributes.attachment_link.description
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser suppor…

# data[].attributes.attachment_link.readable_text
Online Interactive CSS Cheat Sheet
CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators, color picker and more. All these and other useful web designer tools can be found on a single page.
Test the generated syle sheets clicking the blue arrows pointing down. This will populate the interactive HTML-CSS editor on the bottom of the page with your CSS code and a demo HTML markup, giving you a live preview to test and adjust the code further.

Basics - CSS syntax and how to include them in HTML.

Selectors - How to target elements in CSS3.

Properties - An updated list of valid properties. Click the bold text to highlight the text!

Color picker - Click the blue input field and use your mouse to select another color. The slider on the right side sets the transparency of the selected color. Use the generated code snippets.

CSS background generator - Optionally set a background image from URL, set the position, repeat, attachment and color. See the live preview as you adjust the settings then take the generated code when you're satisfied with the result.

Gradient generator - Sset two and optionally a third middle transition color to get the CSS gradient code which works almost in every web browser. Change the transition direction, the position of the middle color and choose between RGB or HEX codes.

Box shadow generator - Get the CSS code for any inset or outset box shadow, customizing the right and down offset, spread, blur, color and opacity.

CSS button generator - create styles for HTML buttons with this panel. Set the size, padding, radius, color and opacity. Adjust the gradient, box shadow, font style and border in other panels.

Text shadow generator - Get the CSS code for your text shadow by setting your own color, opacity, blur, right and down shift, or pick a predefined style from the effect gallery.

Font style generator - Select font-family, size, letter and word spacing, color, font-weight, decoration, style, variant and case for your font and get the CSS code instantly.

CSS transform generator - Scale the size, rotate, shift and skew HTML elements with the transform CSS3 property.

CSS border and outline generator - Set the properties for your box border or outline to get the CSS code. Adjust the width, style, color and position of the lines surrounding your box HTML elements.

Border radius generator - Apply border radius to the corners of your elements, setting it globally or for each individual corner.

Reset CSS - A short code to be added to the top of your stylesheet. This will assure that your page will look the same in all browsers.

Media queries - Declare different views for various media types and properties.

Pixel - EM calculator - Calculate the PX or EM values, knowing the pixel size of the parent element.

Useful links - Look around on other websites we recommend.

Bookmark this CSS cheat sheet with Ctrl + D.

# data[].attributes.attachment_link.description
CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators, color picker and more.

# data[].attributes.attachment_link.readable_text
Using CSS position to layout elements on your website can be hard to figure out. What's the difference between absolute, relative, fixed, and sticky? It can get confusing pretty quickly.

To help, this tutorial will guide you through all the CSS position properties. And you'll be able to get your website layouts pixel perfect!

What does CSS position do?

Using CSS, you can layout all your elements on your webpage visually. For example, you can position an element at the very top of your page, or 50px below the element before it.

To control just how an element will appear in the layout, you need to use the CSS position property. In addition, you can utilize some other position-related properties: top, right, bottom, left, and z-index. (We'll get more into those later on.)

The position property can take five different values: static, relative, absolute, fixed, and sticky.

It sounds like a lot, but don't worry!

Here's how each value for CSS position works:

1. Static

Position: static is the default value that an element will have. This means if you don't declare position for an element in CSS, it will automatically be set to static.

It's important to note that having a static position is the same as not setting the position property at all. (This will come into play a bit later on with absolute positioning.)

Elements that are statically positioned will appear on the page in what we call the normal flow. For example, if you have multiple <d iv> elements one after the other, they will appear on the page directly below one another.

Here's a quick demo to illustrate static position. We are using the following HTML markup:

And here's the CSS we're using:

.first { // No position set, so it's static } .another { // No position set, so it's static top: 50px; }

The second element has a top property set to 50px. You would think that this would move it down 50px, right?

However, here is how it will look on a webpage:

Since both elements have a static position, none of the layout CSS properties will do anything. This makes that top property have no effect on how the second element is displayed.

So that second element ends up being directly below the first element, with no space between.

How can we fix this? Let's move on to the next position:

2. Relative

Position: relative is similar to static in that relatively positioned elements will follow the normal flow of the webpage. But the main difference is that using relative will now unlock the other CSS layout properties.

Think about it this way: you are setting the element to be positioned relative to other elements on the page.

Let's see what this looks like, and adjust our CSS like this:

.first { position: static; } .another { position: relative; top: 50px; }

All the CSS is exactly the same, except that we changed the second element to use position: relative. Doing this makes that top: 50px work!

You can see that the second element is now 50px below the first one, adding that space between them.

Relatively positioned parent and child elements

Let's try another example, using a parent element with a child element nested inside it. Both have position: relative set.

Here's the HTML for that:

And our CSS styles:

.parent { position: relative; } .child { position: relative; top: 0px; left: 0px; }

And here's what that code will look like in real life:

You can see that the pink child element is nicely nested inside the purple parent element. The child is also positioned as close to the top and left inside the parent as is possible. (It will go as far up as the parent text)

Position relative is relatively straight-forward, right? Well, hold on to your hats, because things are about to get crazy with position absolute.

3. Absolute

Position: absolute will cause an element to be taken out of that normal flow of the webpage.

Wait, what does that mean?

So before, using static or relative positioning, elements would be nicely displayed one below the other, depending on their order in the HTML markup. But with absolute positioning, the element is completely taken out of that entire flow.

To help explain, let's do a comparison to illustrate the difference between relative and absolute positioning.

In the previous example, we had a parent element with a child element, both positioned relatively. And the child was nested inside the parent element.

Let's change that child to be positioned absolutely in the parent!

Our CSS will now look like this:

.parent { position: relative; } .child { position: absolute; top: 0px; left: 0px; }

The pink child element now looks very different from our last example.

While it is still within the confines of the parent element, it is positioned at the very top and very left of the parent. It's even covering up the parent text content!

This is due to the top: 0px and left: 0px styles of the child, combined with the child being absolutely positioned. In the normal flow of things, elements wouldn't be on top of (and covering up) other elements.

But since the child is absolute, it's essentially on a different layer than the normal elements. So it can be positioned on top of what else is on the webpage.

But it will stay within the boundaries of the parent element- as long as the parent has its position set. Which leads us to our next point.

There is one other tricky aspect to child elements with absolute positioning...

An absolutely positioned element needs to position itself in relation to a positioned ancestor.

When you take an element out of the normal flow by using position: absolute, it will look for an ancestor element that has its own position set. This is so the child knows what element it should position itself in relation to.

So what happens if a child element is absolutely positioned, but the parent element doesn't have a position set?

Here's our CSS for this illustration:

.parent { // No position set, so it's static } .child { position: absolute; top: 0px; left: 0px; }

And here's what the resulting webpage would look like:

The child has now escaped the confines of the parent element, since the parent has no position set. And the child has gone up to the next (grand)parent element, in this case the <bo dy> element, which is as far as it can go.

(A somewhat sad metaphor would be that this "orphaned" child is looking up the ancestry tree for someone that will be its "parent.")
This is a huge cause of unexpected behavior in CSS for many developers.
If you can remember to always set the parent element of a child element to have position set to relative or absolute (in most cases), you will avoid having your child elements flying up the page to who knows where ?

So, to summarize relative and absolute positioning:

The main difference between relative and absolute positioning is that position: absolute will take a child element completely out of the normal flow of the document. And that child will be positioned in relation to the first parent element that has its own position set.

The last two position values, fixed and sticky, are similar in some ways to position: absolute. But they also are related to your scroll position on the page.

Let's take a look:

4. Fixed

Position: fixed will take the element out of the normal flow, and also position it in the same place in the viewport (what's visible on screen). This means that scrolling will not affect its position at all.

Let's see what this looks like in the code. Here's our HTML:

<div class="first purple"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </div> <div class="another green"></div>

And in our CSS, we've set the second element to be position: fixed:

.first { position: relative; } .another { position: fixed; top: 0px; left: 0px; }

And this is what that will look like:

The green fixed element will stay positioned to the top and left corner of the viewport. And if you scroll, the purple element will scroll up normally, but the green element will remain stuck to where we positioned it.

: A fixed element must have a top or bottom position set. If it doesn't, it will simply not exist on the page at all.

Position: fixed is commonly used to make navigation bars that are always affixed to the top. It's a super helpful property!

Next, we'll take a look at sticky positioning, which is like fixed positioning but with a little extra.

5. Sticky

Position: sticky elements will initially behave like position: relative elements, but if you keep scrolling, they will get taken out of the normal flow and behave like position: fixed wherever you have positioned them.

This can be really useful if you want to stick an element that's initially farther down the page to the top of the screen.

In this code example, we have our green sticky element between two purple elements containing a lot of text. (All the better for scrolling!)

<div class="first purple"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </div> <div class="another green"></div> <div class="purple"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </div>

And the CSS for our sticky element:

.first { position: relative; } .another { position: sticky; top: 0px; }

And here's what it looks like on the webpage!

As you scroll down the page, when you see the green element come into the viewport, it seems like a normal, relatively positioned element. But as you keep scrolling, instead of scrolling off the page, it will become fixed and stick to the top of the viewport.

Just like fixed elements, a sticky element must have top or bottom set in the CSS. If it doesn't have it, the element will continue to behave as if it was relatively positioned, and will never become sticky.

A note on browser support:

Currently, position: sticky doesn't have complete support across the board. Newer browser versions do support it, but no versions of IE do. This may be important if you're working on a client project where IE 11 support is necessary. You can check out the current support on CanIUse.com

In closing

I hope that you've found this tutorial and code examples on CSS positioning helpful! If you have any questions or feedback, feel free to leave a comment below ?
Other resources:
Want more?

I'm creating a course in responsive design! Sign up here to get emailed when it's published.

I write web development tutorials on my blog c oder-coder.com, post mini-tips on Instagram and coding tutorials on YouTube.

# data[].attributes.attachment_link.title
How to use CSS position to layout a website (with example code)

# data[].attributes.attachment_link.description
Using CSS position to layout elements on your website can be hard to figure out. What's the difference between absolute, relative, fixed, and sticky? It can get confusing pretty quickly. To help, this tutorial will guide you through all the CSS position properties. And you'll be able to get your

# data[].attributes.attachment_link.readable_text
When you want to design complex layouts, you'll need to change the typical document flow and override the default browser styles.

You have to control how elements behave and are positioned on the page.

For example, you may want to stack elements next to each other or on top of one another in a specific way or make a header "stick" to the top of the page and not move when you scroll up and down the page.

To do the above, and much more, you'll use CSS's position property.

This property takes in five values: static, relative, absolute, fixed, and sticky.

In this article, we'll focus on the relative and absolute values.

We'll see an overview of how they work, their differences from one another, and how they are best used in conjunction for maximum effect.

Let's get started!

How to view the position of elements using Chrome Developer Tools

A useful tool in your front end web development workflow is Chrome's Developer Tools.

Among many things, you have the ability to look at the HTML/CSS/JavaScript code of any website to understand how different styles work.

To see what position an element has on a web page on a Mac machine, press Control and click at the same time while on the desired element. On a Window's machine, right click on the element you want to select.

A menu will then appear and from there select Inspect.

The Chrome Developer Tools will open.

Select the Computed tab and from there either scroll down to the position element or in the filter search box, type in position.

What is the default position of HTML elements in CSS?

By default, the position property for all HTML elements in CSS is set to static. This means that if you don't specify any other position value or if the position property is not declared explicitly, it'll be static.

Visually, all elements follow the order of the HTML code, and in that way the typical document flow is created.

Elements appear one after the other - directly below one another, according to the order of the HMTL code.

Block elements like <div> are stacked one after the other like this:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>CSS Positioning</title> </head> <body> <div class="parent"> <div class="child one">One</div> <div class="child two">Two</div> <div class="child three">Three</div> <div class="child four">Four</div> </div> </body> </html>

body { margin: 100px auto; } .parent { width: 500px; border: 1px solid red; margin: auto; text-align: center; } .child { border-radius: 10%; width: 100px; height: 100px; margin: 20px; } .one { background-color: powderblue; } .two { background-color: royalblue; } .three { background-color: sienna; } .four { background-color: slateblue; }

The position property isn't declared in the above code and it therefore reverts to the default position: static. It follows the order of the HTML code.

Whatever comes first in the HTML is shown first, and each element follows the next, creating the document flow as I described above.

In our code here, the div with the text "One" is written first so it is shown first on the page. Directly below that, the box with the text "Two" is shown, since it also comes next in the HTML, and so on.

This default positioning doesn't leave any room for flexibility or to move elements around.

What if you wanted to move the first square a bit towards the left of the page - how would you do that?

There are offset properties to do so, like top, bottom, right and left.

But if you try to apply them while the square has this default static position applied to it, these properties will do nothing and the square will not move.

These properties have no effect on position: static.

What is position relative in CSS?

position: relative works the same way as position: static;, but it lets you change an element's position.

But just writing this CSS rule alone will not change anything.

To modify the position, you'll need to apply the top, bottom, right, and left properties mentioned earlier and in that way specify where and how much you want to move the element.

The top, bottom, right, and left offsets push the tag away from where it's specified, working in reverse.

top in fact moves the element towards the bottom of the element's parent container. bottom pushes the element towards the top of the element's parent container, and so on.

Now, you can move the first square to the left by updating the CSS like this:

.one { background-color: powderblue; position: relative; right: 50px; }

Here, the square has moved 50px from the left of where it was supposed to be by default.

position: relative; changes the position of the element relative to the parent element and relative to itself and where it would usually be in the regular document flow of the page. This means that it's relative to its original position within the parent element.

It moves the tag based on where it currently is, relative to its usual place and relative to its surrounding tags without affecting their layout.

Using these offsets and position: relative, you can also change the order in which elements appear on the page.

The second square can appear on top of the first one:

.one { background-color: powderblue; position: relative; top: 150px; } .two { background-color: royalblue; position: relative; bottom: 120px; }

Visually the order is now reversed, while the HTML code remains exactly the same.

To recap, elements that are relatively positioned can move around while still remaining in the regular document flow.

They also do not affect the layout of the surrounding elements.

What is position absolute in CSS?

If you update the CSS rule for the first square to the following:

.one { background-color: powderblue; position: absolute; }

You'll get this result:

This is unexpected behavior. The second square has completely disappeared.

If you also add some offset properties like this:

.one { background-color: powderblue; position: absolute; top: 50px; left: 0; }

Well now the square has completely abandoned it's parent.

Absolute-positioned elements are completely taken out of the regular flow of the web page.

They are not positioned based on their usual place in the document flow, but based on the position of their ancestor.

In the example above, the absolutely positioned square is inside a statically positioned parent.

This means it will be positioned relative to the whole page itself, which means relative to the <html> element - the root of the page.

The coordinates, top: 50px; and left: 0;, are therefore based on the whole page.

If you want the coordinates to be applied to its parent element, you need to relatively position the parent element by updating .parent while keeping .one the same:

.parent { width: 500px; border: 1px solid red; margin: auto; text-align: center; position: relative; } .one { background-color: powderblue; position: absolute; top: 50px; left: 0; }

This code creates the below result:

Absolute positioning takes elements out of the regular document flow while also affecting the layout of the other elements on the page.

Conclusion

Hopefully now you have a better understanding of how relative and absolute positioning work.

If you are interested in learning more about HTML and CSS, you can save and work through this playlist on freeCodeCamp's YouTube channel.

It includes videos to help you get started from scratch, and it'll help you gain a good grasp of the fundamentals.

freeCodeCamp also offers a free and interactive project based Responsive Web Design Certification, which is a great place to start your front end web development journey.

Thanks for reading and happy learning!

# data[].attributes.attachment_link.title
CSS Positioning - Position Absolute and Relative Example

# data[].attributes.attachment_link.description
When you want to design complex layouts, you'll need to change the typical document flow and override the default browser styles. You have to control how elements behave and are positioned on the page. For example, you may want to stack elements next to each other or on top of

# data[].attributes.attachment_link.readable_text
CSS Grid

For CSS grid, we have two axes: Inline and block. Those don't change based on a specific direction. For this section, the plates are desserts.

I saved the best for last, so let's enjoy some desserts with CSS grid.

Grid Alignment Container

Grid child items can either be aligned to their grid container (the table), or the grid area they are in.

Grid Container

The parent element of grid child items (The table).

The Grid Area

A part of the grid that the plate is placed it. The next figure has four grid areas. I highlighted one of them.

Grid - Justify Items

All the plates should be centred horizontally to their grid area, the first row of plates is close to the top side and the second row is close to the bottom side.

By using justify-items, we can control how the plates will be aligned to its grid area.

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Grid - Align Items

Aligning the plates to the center is not enough. To make it better, the plates should be centered vertically and horizontally in its grid area.

Note: the container is the grid area

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Grid - Align Self

The guest with the ice cream wants to move the plate closer to him. To do so, we will use align-self property.

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Grid - Justify Self

Even better, the guest with the ice cream wants the plate to be at the top right on the table. We can use the justify-self property.

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Grid - Justify Content

When we have a grid with fixed size columns, this will create an additional space in case the container is bigger than the columns. In that case, we can use justify-content to control the spacing between the columns.

Adding Justify Content

By adding justify-content: space-between, the columns are distributed and the space between them is equal.

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

Grid - Align Content

When we have a grid with fixed size rows, this will create an additional space in case the container height is bigger than the rows. In that case, we can use align-content to control the spacing between the rows.

Using Align Content

By adding align-content: space-between, the rows are distributed and the space between them is equal.

auto, normal, start, end, center, stretch, baseline, first baseline, last baseline

# data[].attributes.attachment_link.description
An interactive and visual guide on understanding alignment in CSS flexbox and grid.