Talking about CSS position property

Talking about CSS position property

In this article, I will talk about the CSS position property. There is a certain reference value, friends in need can refer to it, I hope to help everyone.

In this article, I will talk about the CSS position property. There is a certain reference value, friends in need can refer to it, I hope to help everyone.

Article Directory
  • position: static

  • position: inherit

  • position: relative

  • position: absolute

  • position: fixed

  • position:sticky

  • z-index

  • reference

The postion property defines the position of an element in the page layout and its effect on surrounding elements. This attribute has five values:

  • position: static

  • position: inherit

  • position: relative

  • position: absolute

  • position: fixed

  • position: sticky(new)

Explain the application of these 6 values ​​in turn.

position: inherit

inherit Like other value css property inherit value, that is inherited from the parent element position values.

position: relative

relative Elements follow the normal document flow, so the surrounding elements will not ignore its existence, relative the element also supports top,bottom,left,right other attributes. When we use the top,bottom,left,right attributes of relativethe element relative positioning of the effect somewhat similar margin properties to achieve the effect, but the difference is , relative the surrounding elements will ignore the element relative moving elements. We note that when relative the element is not relative positioning using the positioning property, it will not be ignored surrounding elements, but the positioning by the positioning property, surrounding elements will move relative to ignore the elements, they will be considered relative elements are still in the original Position, without moving, we use an example to illustrate:

<div style = "position: relative"> Im a relative element </ div> 
<div> Im a default element </ div>

//The existence of relative elements is not ignored

<div style = "position: relative; top: 10px"> Im a relative element </ div> 
<div> Im a default element </ div>

// Ignore the movement of relative elements

position: absolute

absolute The element will leave the normal document flow, so the surrounding elements will ignore its existence . As absolute the element display attribute is set to the none same. At this point, we can use the top,bottom,left,right attributes of the absolute elements absolute positioning. Define two properties, under normal circumstances top or bottom, left or right.
This absolute positioning needs a little understanding, because it is easy to be confused with relative.
For example, when absolute adding elements left:10px after positioning, this left really is which element in terms of it? In fact, at this time it will look up absolute the elements of the first element of a parent, if the parent element position value exists (is not static), then this left:10px is based on the positioning of the elements of the Father, otherwise it will continue to look for the parent element the parent element, the element has been traced back to a parent is not statica position date value, if the condition does not exist in the parent element, it will be based on the outermost window positioning.

<div style = "position: absolute"> Im an absolute element </ div> 
<div> Im a default element </ div>

// Ignore the existence of the absolute element directly

position: fixed

fixed Element will be out of the normal flow of the document, so it absolute is very similar to the elements, it will be ignored surrounding elements to support the top,bottom,left,right property, but both are still very different.
First of all, fixed the element positioning not have any relationship with its parent element, it is always relative outermost window positioning.
Second, the fixed element is just like its name. It is fixed at a certain position on the screen, and it will not disappear due to the screen scrolling.

position:sticky

Viscous positioning is a mixture of relative positioning and fixed positioning. Elements are positioned relative to each other before crossing a certain threshold, and then fixed. E.g:

#one {position: sticky; top: 10px;}

Before the viewport scrolls to the top of the element less than 10px, the element is positioned relative. After that, the element is fixed at a distance of 10px from the top until the viewport viewport rolls back below the threshold.

Sticky positioning is often used to locate the head element of a letter list. The head element that marks the beginning of section B is always below A when scrolling section A. When starting to scroll part B, the head of B will be fixed at the top of the screen, and will not be replaced by the head of C until all the items of B have been scrolled.

Shall designate top, right, bottom or left four threshold values one of which is positioned before the viscosity effect. Otherwise its behavior is the same as relative positioning.

HTML content:

<div> 
  <dl> 
    <dt> A </ dt> 
    <dd> Andrew WK </ dd> 
    <dd> Apparat </ dd> 
    <dd> Arcade Fire </ dd> 
    <dd> At The Drive-In </ dd> 
    <dd> Aziz Ansari </ dd> 
  </ dl> 
  <dl> 
    <dt> C </ dt> 
    <dd> Chromeo </ dd> 
    <dd> Common </ dd> 
    <dd> Converge </ dd> 
    <dd> Crystal Castles </ dd> 
    <dd> Cursive </ dd> 
  </ dl> 
  <dl> 
    <dt> E </ dt> 
    <dd> Explosions In The Sky </ dd> 
  </ dl> 
  <dl>
    <dt> T </ dt> 
    <dd> Ted Leo & The Pharmacists </ dd> 
    <dd> T-Pain </ dd> 
    <dd> Thrice </ dd> 
    <dd> TV On The Radio </ dd>
    <dd> Two Gallants </ dd>
  </ dl> 
</ div>

CSS content

* { 
  box-sizing: border-box; 
} 

dl { 
  margin: 0; 
  padding: 24px 0 0 0; 
} 

dt { 
  background: # B8C1C8; 
  border-bottom: 1px solid # 989EA4; 
  border-top: 1px solid # 717D85; 
  color: #FFF; 
  font: bold 18px / 21px Helvetica, Arial, sans-serif; 
  margin: 0; 
  padding: 2px 0 0 12px; 
  position: -webkit-sticky; 
  position: sticky; 
  top: -1px; 
} 

dd { 
  font : bold 20px / 45px Helvetica, Arial, sans-serif; 
  margin: 0; 
  padding: 0 0 0 12px; 
  white-space: nowrap; 
} 

dd + dd {  
  border-top: 1px solid #CCC
}

Compatibility is shown in the figure:

z-index

Why mention here z-index attribute it? That is because the z-index property is only effective for positioning elements, that is only valid. We first understand what is called . position absolute,relative,fixed z-index

From the figure above, it is not difficult to find that the z-index value represents the stacking order of the elements. The higher the value, the higher the display order.

<div style = "position: absolute; z-index: 1"> Im an absolute element </ div> 
<div style = "position: fixed; z-index: 2"> Im a fixed element </ div>

//The fixed element z-index is higher than the absoulute element, so it appears in front

(I made the background tone non-transparent so that I can see more clearly.) What would happen if the z-index values were the same?

<div style = "position: absolute; z-index: 1"> Im an absolute element </ div> 
<div style = "position: fixed; z-index: 1"> Im a fixed element </ div>

//The z-index value is the same and still appears as a fixed element

So we know that when the z-index value is the same, the display of the loaded element takes precedence.

Regarding the z-index attribute, the hierarchical relationship between the upper and lower levels is also hierarchically divided according to the tree structure, prioritizing the diversity between parent elements, and the hierarchical order of child elements depends on the parent element's level.

For example:
some A element z-index: 1; its parent element z-index: 100,
some B element z-index: 100; its parent element z-index: 99,
some C element z-index: 2; its parent element Same as A parent element

Then the display level of the A element in the browser must be superior to the B element; the level displayed by C is higher than the A element;

7 Best Vue CSS Component for Your App

7 Best Vue CSS Component for Your App

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step.

Vue CSS frameworks are great for many reasons; code is more universally understood, web applications are easier to maintain, and prototyping becomes less of an extra step and more part of the development process.

1. Tailwindcss-Vue

Tailwindcss-Vue is a library of UI components for Vue.js built using the Tailwind CSS utility-first CSS framework.

Download: https://github.com/advanced-data-machines/tailwindcss-vue/archive/master.zip

2. @zeit-ui/vue

Vue implementation for Zeit Style, originating from Zeit Design.

@zeit-ui/vue is a Vue implementation for zeit style, originating from Zeit Design. Lean more at GITHUB.

The design of the Zeit is concise and aesthetic feeling, this is an important reason for popular of Zeit. Now you can use them through the @zeit-ui/vue.

Download: https://github.com/zeit-ui/vue/archive/master.zip

3. CSSeffectsSnippets

Click on the animation to copy it to your clipboard

Demo: https://emilkowalski.github.io/css-effects-snippets/

Download: https://github.com/emilkowalski/css-effects-snippets/archive/master.zip

4. Vue Cirrus

A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure. Cirrus is designed to be adaptable to existing themes or when starting fresh. These are the Vue Components for this CSS framework.

Demo: https://florianwoelki.github.io/vue-cirrus/#/

Download: https://github.com/FlorianWoelki/vue-cirrus/archive/master.zip

5. Vue CSS Modules

Seamless mapping of class names to CSS modules inside of Vue components.

Download: https://github.com/fjc0k/vue-css-modules/archive/master.zip

6. BG MixMaster 90 — CSS Background Grid /Pattern Generator

make a background grid (like graph paper) using only one background gradient property and ended up with this killer mix tape for making all kinds of background grids and patterns.

Download: https://codepen.io/jasesmith/pen/YZEYRL

7. CSSOBJ

CSS Rules from JS, change rules dynamically, CSSOM, css modules, auto vendor prefixer, media query for old browsers.

CSS in JS solution, create CSSOM and CSS rules from js, features:

  • CSS Rules create and diff
  • CSS modules with local class
  • Auto vendor prefixer
  • Media query for old browsers
  • Dynamically change CSS

Demo: https://cssobj.github.io/cssobj-demo/

Download: https://github.com/cssobj/cssobj/archive/master.zip

Practical Guide to Using CSS Position Relative & Absolute

Practical Guide to Using CSS Position Relative & Absolute

Practical Guide to Using CSS Position Relative & Absolute - In this article, you’ll learn how to use CSS position: relative and position: absolute through ample amounts of demos, and learning aids.

In this article, you’ll learn how to use CSS position: relative and position: absolute through ample amounts of demos, and learning aids.

CSS position is sometimes considered an advanced topic because it can do things that are somewhat unexpected. Well, don’t let “the experts” intimidate you from pursuing excellence in your CSS competence! It’s a very accessible topic once you’re equipped with some of the underlying ideas.

Render Flow

An important concept to understanding relative/absolute positioning is render flow.

The general idea is that HTML elements all take up some space. Your browser’s rendering engine always renders everything in a grid-like fashion, starting at the top-left corner and moving successively towards the bottom-right until it’s done placing all of your HTML content.

If you’ve ever had a slow internet connection, and watched as large stuff on the webpage would push everything rightward and downward, that is essentially “render flow” in action.

You can change this default behavior using CSS position.

CSS Position

CSS position is sometimes considered an advanced skill because it’s not as intuitive as font-size or margin, etc., since it changes the natural “render flow” of the browser.

These are the possible values for CSS position:

.foo {
  position: static;
  /* position: relative;
  position: absolute;
  position: sticky;
  position: fixed; */
}

Today we’re just going to look at position: absolute and position: relativesince they’re perhaps the most versatile ones that will get you a lot of mileage once you feel confident with them.

Relative Positioning

When you make an HTML element position: relative, it’ll remain “in the flow” of the layout but you can move it around!

.green-square {
  position: relative;
  top: 25px;
  left: 25px;
  /* ... */
}

Along with position: relative you’ll usually want to define the top, right, bottom, or left offset.

You can think of “relative” position as being: “relative to where it was initially positioned.” In this case, the green square is now 25px from the left, and 25px from the top of where it was initially going to be.

What’s also worth noting is that its width and height is preserved in the square grid. That means it’s still considered “in the flow” of the layout… it just got kinda nudged.

Absolute Positioning

Absolute positioning is a very powerful CSS rule for moving HTML elements around. Sometimes yielding unexpected results:

.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

The orange square is actually the 13th of these 25 squares (the one in the middle of the grid), but it looks like it’s the last square! Weird. Using position: absolutetakes elements “out of flow” so its grid space gets collapsed.

Yea but why’s it all the way up there?!

Originating coordinates

The orange square gets placed at the 0x, 0y coordinates (eg.: the top-left corner). Just how browser rendering always begins at the top-left corner, position: absolute elements use that as their rendering origin too. You can use top/right/bottom/left properties to offset it from there.

But, you can also give it different originating coordinates…

.grid {
  position: relative;
}
.orange-square {
  position: absolute;
  top: 0px;
  left: 0px;
  /* ... */
}

In the example above, the parent element (div.grid) has the position: relative rule which causes the orange square to take that as its rendering origin.

🤨🧐🤨🧐

Pretty weird if you haven’t witnessed this before. I didn’t even learn this until 2 years ago… after having used CSS for about 6 years!

While this may seem unintuitive behavior, it’s actually intentional! Allowing for this gives you a lot of control over where/how you arrange HTML elements… as we’ll see in the demos below.

Demo Time!

Here’s some examples of using position: absolute and position: relativeto create some interesting designs.

Alice in Wonderland

This is an excerpt from “Alice in Wonderland” where some of the letters are nudged down using a few position: relative rules.

<p>
  The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly
  <span style="position: relative; top: 4px">down</span>
  <span style="position: relative; top: 8px">.</span>
  <span style="position: relative; top: 12px">.</span>
  <span style="position: relative; top: 16px">.</span>
</p>

Inline elements are moved in this demo, but you can do this to block elements too! Rest assured: other HTML elements won’t take up its space, and thus ruining this effect.

Overlapping HTML elements

As we covered earlier, if you place absolutely positioned elements inside relatively positioned ones you’re able to effectively group them into layers of HTML elements.

Wrapping both of these absolutely positioned images with a parent <div> that’s relatively positioned, we get this schnazzy portrait of our favorite alligator.

Once you get comfortable using position: relative and position: absolutetogether, you’ll begin to think in terms of creating lush layers of HTML elements instead of thinking in a strictly 2D mindset. It’s something that will take your CSS game to the next level.

Color pit

This demo is similar to the previous one, but we’re using 5 images here that are absolutely positioned inside a single relatively positioned container <div>.

What’s cool is that once you get the width and top/left values just right 👌 for each of the 5 images, you can essentially treat this thing as a single visual element. Move it around the webpage, put other HTML elements next to it, animate it… it’ll retain this exact look as though it’s a single image.

Conclusion

When you start using position: relative and position: absolute it opens a new world of design possibilities. You can create layered visual elements, and feel a deep sense of confidence about how browsers will render, and thus place the visual elements that you’ve so meticulously designed.

CSS Positioning with nested fixed property

<br>

.a{
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  background:yellow;
  z-index:1000000

}

.b{
  position:fixed;
  color:green;
  background:pink;
  left:60px;

}

.c{
  position:relative;
 
}

.d{
  position:static;
 
}
<div class="a">

  <div class="b">
  c is overlapping d is not
  </div>
  <span class="c">
overlaping sibling
  </span>
  <span class="d">
  i    am    not a overlapping     sibling
</span>
</div>


Click here for JSFiddle In the above fiddle i have an html please go through it an explain me why<span class="c"> is overlapping on the <div class = "b"> and why <span class="d"> is not overlapping on the <div class = "b"> what is difference between these two spans why is behaving differently?