How to use CSS absolute position inside a scrollable div element - html

I have the following HTML content. I have multiple elements (e.g., div with id = one, two, three) inside a div container which is scrollable.
In each element, I need to use CSS position 'absolute' which position related to its parent div (i.e., class='Anchor').
The problem I am having is, when I scroll the outer container, none of the divs with an absolute position moved. My understanding of position 'absolute' is it is positioned relative to its parent DIV element. How can I make those 'absolute' position move as I scroll the outer container?
<div style="overflow-y: scroll">
<div>
<div class="Anchor" id="one">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="two">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
<div>
<div class="Anchor" id="three">
<div style="position: absolute"> something </div>
<div style="position: absolute"> something else </div>
</div>
</div>
</div>

You must set position: relative; on the parent div to get the child elements to move in relation to it.
The reality is, you can have the parent div set to any user-defined position, as long as the default static position isn't being used.

Try position: sticky on the div that you want to make float. Also beware the browser support is not that great for sticky.

Related

Set certain ancestor to not clip element

Given this example:
<div class="main">
<div class="container">
<div id="banner-message">
<p>I want to be hidden</p>
<p id="el">I want to be visible</p>
</div>
</div>
</div>
the .main and the .container have position:relative, the #banner-message and the #el have position: absolute because I need to move them around inside the .container which has overflow: hidden with the purpose of hidding all elements that overflow, except the #el, and here is my question:
Given this structure and positioning is it possible to make only #el visible when it overflows the .container?
heres's a fiddle as repro:
https://jsfiddle.net/k5w6stuL/

Anchor carousel navigation HTML to bottom of image using only CSS (without CSS grid)

In the example image, I have navigation. Example code below shows potential markup. If the image and the text below need to move together (slide side to side), how can I anchor the position the navigation using only CSS. I suspect that I'll have to rely on some JavaScript without knowing heights of elements, but I would rather not have to.
To be clear, the navigation here appears to be centered, but they are not. They need to be floated at the bottom of an arbitrary image height.
UPDATE
Example code (see CodePen):
<div class="carousel">
<div class="indices">
<div class="dot"><div class="ghost">Carousel slide 1</div></div>
<div class="dot"><div class="ghost">Carousel slide 2</div></div>
<div class="dot"><div class="ghost">Carousel slide 3</div></div>
</div>
<div class="gutter">
<div class="content">
<div class="img"><img src="https://cdn.pixabay.com/photo/2016/05/25/13/55/horses-1414889_1280.jpg" alt="Horses"></div>
<div class="text">This text content can really be any arbitrary height, so it wouldn’t work to just use negative margins on the navigation, unfortunately.</div>
</div>
<div class="content">
<div class="img"><img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg" alt="Other Horses"></div>
<div class="text">Also, images can be arbitrary heights.</div>
</div>
<div class="content">
<div class="img"><img src="http://maxpixel.freegreatpicture.com/static/photo/640/Water-Turtle-Nature-Reptile-649667.jpg" alt="Turtles"></div>
<div class="text">Turtles</div>
</div>
</div>
<div class="nav">
<a class="item prev" href="#" aria-label="Previous carousel story"></a>
<a class="item next" href="#" aria-label="Next carousel story"></a>
</div>
</div>
My code is very flexible; I can move things around if need be.
Have you tried to use position: relative and position: absolute (like in this simple example)? You wrap your image slide and bullet navigation in a div where you set the position to relative. Then set the navigation wrapper to absolute position (bottom: 0 to place it at the bottom of the parent div). It will normally stay in place even if the image changes as the height of the parent div will depend on the img height.
.outer-div {
position: relative;
}
.bullet-nav {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%); /* to center nav */
}

Absolute position as per parent's parent

I have 3 divs as follows:
<div class="div-1">
<div class="div-2">
<span class="wrapper">test</span>
<div class="div-3">
</div>
</div>
</div>
div-1 and div-2 have position: relative.
div-3 has position absolute.
wrapper has position absolute.
I need div-2 to be positioned relatively so that wrapper can be positioned absolutely.
Now what I need is, div-3 must be positioned absolutely in relative to div-1 and not div-2.
Any way to achieve this?
If you have made .div-3 position:absolute , it will be with respect to the parent div which in div-2 in your case. It will get aligned to the top-left corner of it. If you want to make it relative to div-1 try this:
<div class="div-1">
<div class="div-2">
<span class="wrapper">test</span>
</div>
<div class="div-3">
</div>
</div>
This will make it with relative to div-1. For further understanding of positioning you can go to this link
just set div-2 position: static
and div-1 position: relative.
that'll work

Positioning a div at bottom of another div without specified height

I Have this HTML
<div style="position: relative;">
<div style="top:0">
</div>
<div style='position: absolute; bottom:0; margin-bottom:0px;'>
</div>
</div>
This code is working absolutely fine for IE but on other browsers the two inner div are overlapping, I cannot give any specified height to the outer div.
You don't need absolute positioning :
<div style="position: relative;">
<div style="background:black;">
test
</div>
<div style='background:red;'>
test
</div>
</div>
See working fiddle.

HTML: set element size relative to parent when position is absolute

Is there a way to do it?
If I do it like this:
<div id="container" style="width:500px;">
<div id="content" style="position:absolute;width:100%;">
</div>
</div>
Then the content div will have the width of the browser window, instead of the 500px from the parent container div.
Always give position:relative to the parent if it's child have position:absolute;. Give position:relative to your #container DIV. Write like this:
<div id="container" style="width:500px;position:relative">
<div id="content" style="position:absolute;width:100%;">
</div>
</div>
Just set the position of #container to relative. Check out this jsFiddle for a demo.