question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[v4] Why are all col classes 'position: relative'?

See original GitHub issue

Is there a reason for making all columns relative?

Typically I wrap my rows and cols inside ‘sections’ which have their own padding top and bottom. I sometimes choose to make elements inside those columns stick absolutely to the edges of the section. With cols as relative now, it’s less trivial to do so.

Applying an override of…

[class*='col'] {
    position: static;
}

does the trick, and I can’t seem to find any drawbacks. Although I’m wondering if there’s a good reason for relative in the first place? Please correct me if I’m wrong or missing something.

Cheers!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:10
  • Comments:21 (10 by maintainers)

github_iconTop GitHub Comments

7reactions
mdocommented, Mar 10, 2019

Yup, agreed.

We’ll be dropping the relative from columns in v5, just need to make sure we’re considering the change to other components as mentioned in my last comment. ❤️

5reactions
mdocommented, Jan 10, 2018

PR opened: #25255.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Position - Bootstrap
Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in...
Read more >
Bootstrap grid-system is always in front - Stack Overflow
position: relative is necessary in Bootstrap for when you need to rearrange columns. This is accomplished by using col-sm-push-4 or similar ...
Read more >
position - CSS: Cascading Style Sheets - MDN Web Docs
The element is removed from the normal document flow, and no space is created for the element in the page layout. It is...
Read more >
Selectors Level 4 - W3C
E:nth-col( n ), an E element that represents a cell belonging to ... Like all CSS keywords, pseudo-class names are ASCII case-insensitive.
Read more >
CSS Layout - The position Property - W3Schools
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found