Setting Outer Div to Fixed, but maintaining relative position on inner div - javascript

I have two nested divs.
<div style="position: fixed">
<div style="position: relative">
</div>
</div>
When I set a fixed position to the outer div, all of the elements in the inner div lose their desired positioning. Can I maintain the order of the elements inside the inner div while still having the outer div set to a fixed position?

Related

Semantic-ui, sticky on outer container

I'm trying to achieve full width background container wrappers combined with a sticky element.
This diagram shows the layout I wish to achieve:
And here's a pen showing how I've laid it out so far:
https://codepen.io/othbert/pen/PJMwPm
$('[data-make-sticky-to]').sticky({
context: $('[data-make-sticky-to]').data('makeStickyTo')
})
The issue I have appears to be that the immediate container of the sticky element has it's height set to allow the sticky to move inside of it.
In order to allow full width background wrappers but keep the center aligned content, I am using the structure: full-width-wrapper > container grid > 2 column layout.
I thought to set an outermost unstyled container, #sticky-c, in order to allow the sticky to move inside that context rather than the immediate grid, but instead, the height needed for the sticky to move is applied to the containing grid.
All these sections should have a dynamic height so I can't just force the grid to stay a certain height unfortunately. Not without calculating and setting it in JS, but this seems like something semantic should be able to do out of the box.
Any ideas?
I was thinking about this all wrong.
To fix, I set the column with the sticky in, to position: relative. Then I added another containing div directly around the sticky with position: absolute.
The sticky flows within the absolute container that has its height set by semantic. The position is set correctly as it's based upon the relative parent surrounding it.
And that's all there is to it.
Updated codepen: https://codepen.io/othbert/pen/MOWBja
...
<div class="three wide left floated column sticky-relative">
<div class="sticky-absolute">
<div class="ui sticky segment" data-make-sticky-to="#sticky-c">
STICKY CONTENT
</div>
</div>
</div>
...
and the SCSS...
.sticky {
&-relative {
position: relative;
}
&-absolute {
position: absolute;
}
}

How to place div behind other div

I want to create a slideshow that consists in 5 images and I want to have a big one in the middle with 2 buttons and 4 behind them, in this way(the first one is 1, the second one is 2, the third one (the biggest) is 3 and so on...): http://imgur.com/P9EpTcq
(the dotted line is behind the solid line). I hope you understand what I'm saying.
Cosidering this simple HTML markup:
<div class="slideshow">
<img href="#" class="ssimg" id="1"/>
<img href="#" class="ssimg" id="2"/>
<div class="big-ssimg">
<img href="#" class="ssimg" id="3"/>
<div class="previous-bttn"></div>
<div class="next-bttn"></div>
</div>
<img href="#" class="ssimg" id="4"/>
<img href="#" class="ssimg" id="5"/>
</div>
*I want the two divs inside .big-ssimg to be equal 1/4 of the parent each, the .previous-bttn to be the fist 1/4 of the .big-ssimg div, and the .next-bttn one to be the last 1/4 of the parent.
Considering this, how can I obtain it? I can handle js and other things, also I know how to use z-index, but not so much "position" and "display" css properties, I just need to know how to place them in that way:
img#1 and img#5 behind img#2 and img#4, img#2 and img#4 behind img#3
The next and previous buttons to be first and the last 1/4 of parent and to be over the image that represent 100% height and width of parent div.
To stack them, you will set the position to either relative or absolute in order for z-index to work. Be sure to apply the positioning to all elements that you want to stack.
Typically I use Absolute position on all layers within a container div that is set to position:relative. This allows you to use the container to position the whole stack and the layer divs will be positioned relative to the container instead of the body.
.container{
position:relative;
}
.layer1, .layer2 {
position:absolute;
top:0; //position the layers to the top left corner of the container
left:0; //position the layers to the top left corner of the container
}
.layer1{
z-index:100;
}
.layer2{
z-index:200;
}
<div class="container">
<div class="layer1"></div>
<div class="layer2"></div>
</div>

JS get the position of element based on the body when position absolute on element

I need to build a tooltip, but I need to position the tooltip based on the body because its position is absolute and I don't want any relative parent to break my style.
<div style="position: relative;">
<input>
<p class="tooltip">tooltip</p>
</div>
I need the tooltip to be on the input but always relative to the body.
How can I calc this?
Elements with position: absolute are always realtive to the first parent Element with relative. (or anything except static and fixed)
So to fix it you need to avoid using position: relative on the parent
<div>
<input>
<p class="tooltip">tooltip</p>
</div>
or since it's anyways absolute positioned move the tooltip out of the relative element.
<p class="tooltip">tooltip</p>
<div style="position: relative;">
<input>
</div>
Using position:absolute; should position the tooltip relative to the nearest positioned element—in this case, the div marked position:relative;. (See the CSS3 reference on absolute positioning.)
So in your example, you don't need to worry about any parent elements with relative positioning, as they shouldn't affect the absolute positioning context. You should be able to simply use:
<div style="position: relative;">
<input>
<p class="tooltip" style="position:absolute; top:0; left:0;>tooltip</p>
</div>
Unless I'm misunderstanding your question, in which case, please provide more detailed examples.
EDIT:
If you're trying to avoid using position: relative, you can set the tooltip position with javascript:
var input = document.getElementById('input-id');
var tooltip = document.getElementById('tooltip-id');
tooltip.style.left = (input.offsetLeft)+'px';
tooltip.style.top = (input.offsetTop)+'px';
change class to style:
<div>
<input>
<p class="tooltip" style="position:relative;">tooltip</p>
</div>

Add div to parent with absolute position

I have one parent div with style position relative and couple divs inside that div with style absolute like
<div id="container" style="position:relative;width=400px;height=400px;">
<div style="top:20px;left:20px;width:20px;height:20px;"></div>
<div style="top:40px;left:40px;width:20px;height:20px;"></div>
<div style="top:60px;left:60px;width:20px;height:20px;"></div>
</div>
How to add new div to div with id="container" with top="0px" left="0px"?
$('#container').append(
$('<div/>').css({top:'0px',left:'0px'})
);
Here's a live example: http://jsfiddle.net/AWYbD/
first, be careful to set "position: absolute" to your inner divs. This is not implicitely set when using the top, left, etc declarations.
To add a new div (I assume using jquery),
just do
$('#container').append('<div style="position:asbolute; top: 0px; left: 0px;"></div>');

Placing a div exactly above a moving div

I am customizing jquery-ui slider(range). The two corner points(div) are draggable. I wish to place the exact value of the slider just above the corner points but i am unable to do So, can anyone suggest how the position of the div containing the current values can be changed using javascript ?
I'd do it using CSS - make the value div a child of the slider div, then use position: relative on the value div with a negative top
<div id="Slider">
<div id="Value" style="position: relative; top: -100px; width:...">
</div>
</div>

Categories