Live Chat
Today, you will learn about inline CSS and positioning, something a coding class might focus on. Inline CSS and positioning allow you to move elements away from the normal flow of your document layout and make them behave differently from other areas. For example, you could place the elements on top of each other, or you might want elements to remain in a similar location. This guide will also explain the different inline CSS values, another topic you might learn in a coding class. To get the most out of this tutorial, you’ll want to know the basics of HTML and a general understanding of what CSS is.
What is Inline CSS Positioning?
When you use inline CSS positioning, your goal is to override the flow of your document to create interesting effects. For example, you might want to change the location of boxes in one layout, or maybe you want to give them a distressed or quirky feel. You can also use it to keep the UI element static, regardless of where the user scrolls on the page.
Using Static Positioning
You might learn in a coding class that the default inline CSS position for every element is static, or unmoving. Let’s look at an example so you can see how static inline CSS positioning works for yourself. First, get the 0_basic-flow.html document from GitHub. Then, add “positioned” to your code:
Next, add a rule to the inline CSS code:
Because you haven’t changed the inline CSS from its default static positioning, you won’t notice any difference except in the color of your paragraph.
Using Relative Positioning
Many CSS tutorials will move on to cover relative positioning, which allows you to adjust the position of an element after placing it in the layout. This includes variations like having the element overlap with other parts of the page. To do this, use position: relative” in the code. However, if you save the page right now, you will not make a change; you must use left, top, right and bottom properties to update this.
Left, Top, Right and Bottom Properties
The properties listed above let you specify where you want to move an element by adding different declarations to your inline CSS rule:
Now, if you save this and look at it, you can see that it has moved. However, you’ll notice that it moved to the screen’s right and bottom instead of the left and top. This might seem odd at first, however, think of this code like a force that pushes the element in the specified direction, so when you specify “left: 50px;”, imagine a force on the left side of your element pushing it towards the right.
Working With Absolute Inline CSS Positioning
A coding class might also explain how using absolute positioning with inline CSS will produce different results on your webpage; you can use the position: absolute to do this. Once this is added to your code, you’ll notice that the gap from the element has disappeared. Because the element is absolutely positioned using inline CSS, it does not exist in the normal flow of the page, rather, it has a separate layer. This means that you can create features using UI that do not interfere with other elements’ positions, including control menus, popup boxes or features that you can drag and drop onto the page.
You will also see that the element’s position has changed. The different directions have different behaviors when using absolute inline CSS positioning.
Positioning Contexts
If you have an element that’s been positioned with inline CSS, the “containing element” will depend on where the element’s ancestors are located: if the ancestor elements are with defined properties, then the ancestors will be static, or in the containing block. This has the viewport’s dimensions and the element of <html>.
Using Z-Index
When elements overlap, how does the browser decide which one goes on top? The answer is the z-index. This code in CSS ensures that your first paragraph is absolutely positioned:
Now, you’ll see your first paragraph is green, and has moved away from the flow of your document slightly above its original location. It is below your original paragraph because it was positioned later.
You can change the inline CSS order using a z-index. This relates to the z-axis, which is used by webpages to determine the position of the shadows, images and other elements on the page. You can change the order on your page by using a declaration:
The green paragraph should now be the one on top. Remember, you cannot use a value with a unit to move elements. In other words, you cannot move one paragraph 42 pixels up. A higher value goes above lower ones, so using 3 and 4 have a similar effect as using 300 and 400.
Working With Fixed Positioning With Inline CSS
Absolute positioning with inline CSS keeps your element in one place depending on the <html>, but fixed positioning keeps an element relative to the view of the browser. You could use this to create a navigation menu that a user can always view.
Let’s look at an example. First, you want to delete the p:nth-of-type(1) and the .positioned rules in CSS. Next, update the rule so you can remove your position: relative;. It will look something like this:
You will also need to make the top zero, so it will remain at the beginning of the screen. Since the background is white and has padding, you will not see the content below it. The result of this inline CSS is that the heading is constantly visible to the user while scrolling through the content below.
Closing Thoughts
Hopefully, this and other CSS tutorials have helped you learn a little more about inline CSS positioning and displays. While you’re not likely to use these techniques to create an entire layout, you can use them for many types of tasks on a webpage you’re working with. As always, keep practicing. Whether you are currently enrolled in a coding class or teaching yourself, you will want to take your time and go over the information in this article and other CSS tutorials until you feel that you have a good understanding of this inline CSS technique.
*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.
Get Program Info
Ready to learn more about Berkeley Coding Boot Camp in San Francisco? Contact an admissions advisor at (510) 306-1218.