I have two <div>s with absolute position. One is displayed and the other is display: none on load. When the link on the visible one is clicked it is moved and the other is displayed.
I have a third <div> with link that I would like to display directly below these. Since they’re both position: absolute I have not been able to find a way to do this. I have found various solutions, but most of them are workarounds for using absolute position. Since my <div>s need to show ontop of each other I unfortunately can’t remove the absolute positioning.
As such I have tried various combinations of position: absolute and position: relative on the three <div>s, but so far nothing has worked.
JSFiddle with my problem: https://jsfiddle.net/dagz9tLw/1/
<div> with id linkbar is the one that needs to be at the bottom.
The other two <div>s don’t have a set height so margin-top won’t work. linkbar also needs to be just below the <div>s and not right at the bottom of the page.
I experienced that using a div acting as a buffer is quite useful and easy to implement for this purpose. You just set it above your div#linkbar and adjust it's height on load and when the div#front get's repositioned:
$("#topBuffer").css("height", $("#front").offset().top + $("#front").height());
$("#showLink").click(function() {
if (!$("#back").is(":visible")) {
$("#back").show();
$("#front").animate({
'marginLeft': "+=30px"
});
$("#front").animate({
'marginTop': "+=20px"
});
$("#topBuffer").animate({
'height': "+=20px"
});
}
return true;
});
.front {
width: 400px;
display: block;
border: 2px solid #000000;
text-align: center;
position: absolute;
margin-top: 20px;
z-index: 10;
background-color: white;
}
.back {
display: none;
width: 400px;
border: 2px solid #000000;
text-align: center;
position: absolute;
z-index: 1;
margin-top: 20px;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front" class="front">
<a id="showLink" href="javascript:void(0);">front</a>
</div>
<div id="back" class="back">
back
</div>
<div id="topBuffer"></div>
<div id="linkbar">
test
test
test
</div>
Related
I am trying to overlay 2 DIV's in my main parent DIV:
I want to overlay the the second div over on top of the first one. I have a problem overlaying it as I cannot keep it in the middle of the screen.
I have tried this to overlay:
The overlay works fine here, but my container is no longer center when I do this. How can I overlay and keep it center ?
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Here is what you need to do (see width of both divs and text-align properties):
You can give them background color to see z-index works perfectly :)
#first {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 1;
}
#second {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 2;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
When you position absolute, the positioned element is taken out of the document flow and positioned relative to the next highest parent element that is not the default position, i.e. not position: static;
The following will cause the absolute positioned children to stay within the containing div:
#container {
position: relative;
}
Your container's text is no longer centered because you have removed its children from the document flow. In essence, it has no content and collapses, and therefore, has no width to which to align the text.
One thing you could do is set the container to position: relative and full-width (i.e. width: 100vw), then set its children to width: 100%.
Then the inner divs will take on the width of their parent.
See this working JSFiddle.
#container {
position: relative;
width: 100%;
height: 100px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
#first{
position: absolute;
}
#second{
position: absolute;
}
<div id="container" class="container">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Your main issue is that the divs will not have any relative width to the parent div.
Therefore the text is still technically "centered" in each corresponding div because they're inheriting text-align: center from the container div.
However, the divs' widths will automatically be as wide as they needs to be (i.e. to fit the text, in this case).
You can remedy this one of two ways:
Force the divs to be centered
Give both divs the following (extra) CSS:
left: 50%;
width: 100%;
margin-left: -50%;
This will literally center them in their parent div.
or
Force the divs to be the same size as their parent
Give both the divs the following (extra) CSS:
top: 0;
bottom: 0;
left: 0;
right: 0;
This sets the divs to span their entire parent's height and width.
In both situations, you might need to make the .container class use position: relative, in order for the child divs to have something to be absolute to.
If you're using Bootstrap, there is no need to worry about this, as .container class already has this applied.
Hope one of these solutions helps you :)
Try this style:
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
I am working on a parallax page and super frustrated when it comes down to keeping the elements position exactly as i want when the window size is changed (responsive). All my elements are text and therefor a bit challenging hence the font-sizes need to follow a long with the positioning. I do not know where to begin with this challenge, as i have been experimenting with the viewport units such as vw and vh without any luck.
I have attached three images that illustrates the element positioning i want to achieve. I have added a background color to the elements to illustrate the positions. How do i achieve this responsiveness on my elements?
Absolute position is a must hence i need to parallax the elements up and down without being independent of any orders.
Fiddle: https://jsfiddle.net/440k02wg/1/
HTML
<section>
<div class="header__1">
A LOT OF TEXT
</div>
<div class="header__2">
BIT MORE TEXT
</div>
<div class="header__3">
SOME TEXT
</div>
</section>
CSS
body, html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
.header__1 {
font-size: 5vw;
color: red;
background-color: grey;
top: 14vh;
}
.header__2 {
top: 25vh;
left: 4vw;
font-size: 10vw;
color: orange;
background-color: white;
}
.header__3 {
top: 48vh;
left: 60vw;
font-size: 5vw;
color: blue;
background-color: green;
}
Is position: absolute; crucial for you? Removing that makes the issue a whole lot simpler, since block elements positioned relatively or statically always stick to their siblings. I've updated your provided example with my suggestion (and some tweaks to have the elements align accordingly).
Fiddle
Hope it's of some help :)
I am using a `.toggle("slide") function to try and get a piece of text I have to appear as if each letter is sliding in. Unfortunately, it looks as if the text is flying in instead. I tried to squeeze the margins in tight, so that it would start at a closer place, but it still looks as if it is flying in from the left side.
Is there a better way to do this, so it looks as if the letters are sliding in without "flying in"?
$("#home-learn").toggle("slide");
#blue {
background-color: #0085A1;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
display: none;
text-align: center;
position: relative;
margin: 0 40%;
top: 50%;
font-size: 2.3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="blue">
<div id="home-learn">Learn more...</div>
</div>
For the effect you want, put a div inside your container. Make the div position absolute, make it 100% the height and width of the container, and make it the same background color as the main background. Make the div's z index higher than the container so the div sits over the text like a curtain. Then use toggle() to slide the curtain to the right exposing the text underneath.
Note that this uses jQuery UI, without it, you can't make toggle() slide to the right like this needs.(at least to my knowledge you cant). If you dont want to use jquery UI, you could use .animate() instead of toggle()
$("#curtain-div").toggle("slide", {
direction: "right"
}, 3000);
#blue {
background-color: #0085A1;
position: relative;
width: 100%;
height: 300px;
}
#home-learn {
color: #FFF;
text-align: center;
position: relative;
top: 50%;
font-size: 2.3em;
}
#curtain-div {
width: 100%;
height: 100%;
position: absolute;
background-color: #0085A1;
top: 0;
left: 0;
z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="blue">
<div id="home-learn">
<div id="curtain-div"></div>
Learn more...
</div>
</div>
I would like to place an image centrally within a div (fiddle). Because I want that div to inherit that div's height from another one that is floating next to it, I had to use this trick.
For that reason, the solutions described here don't seem to be working.
The requirement is that no other behavior is modified, but the code can be as long as the effect achieved is the same. I am also willing to accept solutions involving javascript, if necessary.
<div class="container">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: yellow;
width: 150px;
float: left;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
.logo {
width: 100px;
}
I have modified the code so that the logo image can be center aligned horizontally as well as vertically.
JSFiddle
HTML code:
<div class="container">
<div class="image-div">
<div class="logo-div">
<img class="logo" src="http://bit.ly/1qCKrtJ" />
</div>
</div>
<div class="text-div">
<h4 style="display: inline;">Because Sometimes It Takes a Village</h4><br />
What about robots the size of tea cups that scoot around on tiny wheels, snapping pictures with miniature cameras and keeping track of where they are in relation to dozens of others?
</div>
</div>
Css code:
.container {
background: green;
overflow: hidden;
}
.logo-div {
background: #FFFF00;
display: table-cell;
height: 100px;
text-align: center;
vertical-align: middle;
width: 150px;
}
.text-div {
background: blue;
float: left;
max-width: 350px;
}
.image-div {
float: left;
}
.logo {
width: 100px;
}
If you have further issue, please comment on the code, and modify the jsfiddle.
Regards D.
There are two ways for this. One you can set Margin property of any component to 'auto' if you want it to align at the middle. Of course you can set this property in CSS instead of using style tag.
<img src="http://bit.ly/1qCKrtJ" style="margin:auto;"/>
Another is using center tag
(As 'margin:auto' may not work for images for some browsers however it works for div tag.)
<center>
<img src="http://bit.ly/1qCKrtJ" alt="Logo">
</center>
If you need just horizontal center, try:
.logo-div {text-align: center;}
img {margin: 0 auto;}
http://jsfiddle.net/yXNnd/18/
JS version
Using jQuery (I'm too lazy :))
http://jsfiddle.net/yXNnd/25/
Add this js
$(document).ready(function(){
var img = $('.logo-div img');
var top = ($('.container').height() / 2) - (img.height() / 2);
img.css('margin-top', top + 'px');
});
if i mouseover on my nick in stackoverflow on top page that show me new menu with * activity
* privileges
* logout etc. how can i make it? i maked something:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<style type="text/css">
#ONE {
background-color: #888;
width: 500px;
height: 500px;
}
#TWO {
background-color: blue;
width: 50px;
height: 50px;
}
#THREE {
background-color: yellow;
width: 200px;
height: 200px;
display: none;
}
#four {
background-color: red;
width: 200px;
height: 200px;
}
</style>
<script type="text/javascript">
$(document).ready(
function()
{
$("#TWO").click(
function()
{
$("#THREE").toggle();
});
});
</script>
<div id="ONE">
<div id="TWO">
</div>
<div id="four">
</div>
<div id="THREE">
</div>
</div>
sample image: http://img231.imageshack.us/img231/3885/threej.png
default
click for blue div
how can i it make?
If I understand correctly, you're asking how to make the yellow div appear up beside the blue one, as you have it in the third mockup? If that's the case, then:
You'll want to read up on CSS Positioning. In a nutshell, to make the yellow div sit over everything like that, it needs to take position: absolute; It'll be positioned in relation to it's nearest ancestor that has positioning, so set #ONE to position: relative;
So:
#ONE {
position: relative;
}
#THREE {
position: absolute;
left: 100%;
top: 25%;
}
This will make the top-left of #THREE shift to the far right of and a quarter of the way down #ONE. The absolute positioning also takes it out of the flow of the document, allowing it to overlap other elements.
If you want to position elements on top of each other, use position: relative or absolute. If you want it to stick to a position on your window regardless of if you scroll, use fixed.
After defining the position, you can define top, right, bottom and left to position it where you want. To simulate the 3rd image in your example, you could add:
position:relative;
top: -220px;
left:50px;
to your #THREE elements CSS, like here:
http://jsfiddle.net/niklasvh/Axjgf/