CSS POSITIONING (PART1)
Why Stack Overflow recommends it
Stack Overflow users link it when answering beginner questions about element positioning and layout, especially how relative parents contain absolutely positioned children.
Recommended by 4 people across 4 different months, 2017 to 2019.
What it is
A short 2014 tutorial from the DevTips channel covering the first half of CSS positioning, namely position: static and position: relative. It is part of a longer DevTips series that also covers absolute positioning, floats, Flexbox and CSS units.
What people said
Strong rec kubre · 2017-04 · Stack Overflow · on “Is there a more efficient way to move elements in CSS?”
CSS have no. of options to control the flow of your content on screen. Most of the time you would be playing with them to get most accurate you can.Here's a video series which I found Most helpful for the beginners. It is by DevTips and it contains info. about positioning, floats & clears, Flexbox (This is pretty nice responsive way to setup your website flow), CSS Units, etc. It's worth to check this series. Here's the Link: Devtips: Positioning Tutorial [this video]
Recommends Niraj · 2017-05 · Stack Overflow · on “Bootstrap responsiveness for Absolutely Positioned Elements”
your subdiv will be inside column if column has property relative. you can view the first two video to get better understanding [this video]
Recommends Facundo Corradini · 2018-01 · Stack Overflow · on “Design breaks in every resolution - I think I might be positioning things wrong”
Position:absolute is (almost) never the way. You got yoursef into a labyrinth you're not gonna be able to get out, no matter how many media queries you try. By setting everything to position:absolute you're removing everything from the flow , so basically making it ridiculously specific. Things should be able to position themselves automatically bellow others ( display:block , clears, etc) or side-by side (floats, inline-blocks, flex, grid, etc) without recurring to strict positioning with left , top , etc. Most of the times making an element responsive is easy as switching the display from an inline-block, flex, etc to display:block. On grids is just using auto-fit or auto-fill, or adjustin
Recommends Moglash · 2019-06 · Stack Overflow · on “How to fix text inside a block that grows”
The problem is quite hard to identify since you didn't add the HTML code. I'll try to give some advice anyway. Maybe you could do something like this: <div class="section-container"> <div class="section-box-that-will-grow-on-hover"></div> <div class="section-box-that-contains-your-text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde iste reiciendis facilis voluptatem ad, odit quia quaerat quis voluptatibus aperiam enim rerum quidem dignissimos, voluptas explicabo, ab fugiat consectetur. Ipsum?</p> </div> </div> <style> .section-container{ color: #fff; width: 400px; height: 400px; position: relative; margin-top: 200px; } .section-box-that-will-grow-on-hover{ background: #0