Here's my scenario: I have a few divs that must stack on top of each other. Each div will have a background color (or texture.) Each of the divs has another div nested inside of it. The parent div's color or texture extends the entire width of the screen.
Problem: When adding the second div, it appears above the first.
See what I'm talking about at: http://staging.ontempoideas.com/bvcil
It looks something like this...
HTML:
<div id="1P">
<div id="1C">
</div>
</div>
<div id="2P">
<div id="2C">
</div>
</div>
CSS:
#1P {
position: absolute;
left: 0;
right: 0;
background-color: blue;
}
#1C {
width: 920px;
margin-left: auto;
margin-right: auto;
}
#2P {
position: absolute;
left: 0;
right: 0;
background-color: green;
}
Any thoughts?
To be honest, I'm not sure exactly what you're after from your description, but I put some code here that may help: https://jsfiddle.net/JTBennett/hksxgncv/1/
These are the positions you want to be using here:
position:relative;
position:inherit;
Your two parent divs are set at the same exact absolute position. If you want to clarify anything, I can update it for you.
Related
Is it possible with only CSS to have the following effect:
I have two divs. One follows the other.
Now, if the user starts scrolling down the page (to see other content, more divs if you want..) the second div should "go up" (could also stay fixed and the first div goes down, I mean it would look the same) and overlap the first.
But only overlap for let's say 50px. After that, the behaviour is normal again, meaning that if you scroll further, those divs move out of the browser window eventually.
Have I made myself clear? I can add two coloured boxed to showcase if that helps. I played around a bit and tried parallex/position fixed/sticky mixes, but none seem to work with a given height restriction. I just wonder if this is possible without javascript.
You can get this effect by using position: sticky on both elements. There are a few things that can stop this from taking place, like having overflow: hidden or not having a height set on the parent element.
HTML
<div class="container">
<div class="red-box">This is the red box</div>
<div class="blue-box">this is the blue box</div>
</div>
<!-- needs space to be able to actually scroll on the page -->
<div class="container">
<div class=""></div>
<div class=""></div>
</div>
CSS
/* set the height of the container so that the sticky elements know how far they are meant to scroll */
.container{
min-height: 400px;
}
/* set your position sticky and a attribute that tells it when it should become sticky, in this case right at the top */
.red-box{
height: 400px;
background-color: red;
position: sticky;
top: 0px;
}
.blue-box{
height: 400px;
background-color: blue;
position: sticky;
top: 0px;
}
I have done a quick codepen example so that you can see this working. hope that helps.
https://codepen.io/Domnewmarch/pen/NWzqBde
Solution: I used a combination of negative margin, z-index and position: sticky.
Added margin to the 2nd container to make it more visible.
.sticky-wrapper {
height: 310px;
margin-bottom: -60px;
}
.content {
z-index: -1;
position: sticky;
top: 0;
padding: 0 3%;
height: 250px;
background-color: green;
}
.foo {
margin: 0 50px;
background-color: red;
height: 200px;
}
.next-content {
height: 1000px;
background-color: khaki;
}
<div class="sticky-wrapper">
<div class="content"></div>
</div>
<div class="foo"></div>
<div class="next-content"></div>
<div class="shouldBeOverlapped">
content
</div>
now I want to add another div on it (e.g. waiting) so it will 100% cover it and make it unclickable, preferably transparented. How to do it?
Try to search for "overlay". This will be the right thing.
Example here:
#overlay {
height: 100%;
width: 100%;
background-color: black;
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
}
<div class="shouldBeOverlapped">
content
</div>
<div id="overlay"></div>
You can try to put that waiting div as a :before. Although it is limited, it can be easy to set up.
#textToHide {
background: yellow;
position: relative;
width: 300px;
padding: 10px;
}
#textToHide:before {
content: '';
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div id="textToHide">
This text is protected against selection... although we could still look for it in the source code...
</div>
You need a containing div element with it's position attribute set to relative. This defines the bounds of the overlay. Without it the overlay will look up the DOM until it finds a parent it can get it's positioning information from. If it doesn't find one, it will cover the entire page body.
I've created a JSFiddle for you here: https://jsfiddle.net/aogd164t/
Try removing position: relative from the container class and see the result.
I have tried align, position, and others. This problem couldn't be found because I would find topics relative to this discussing the <div> "function" but I need the solution for the div{}
Here's my code:
div{background-color: White; opacity:0.7; width: 380px; height: 325px;}
So how do I position it to be in a specific spot, or even use simple keywords like align center or such. I have tried align:center; and position:center;(out of curiosity) but none did what I thought it would do. So how do I do this??
You can try using position, top, and left to put your div wherever you want. Like this:
div{
background-color: #000;
opacity:0.7;
width: 380px;
height: 325px;
position: relative;
top: 200px;
left: 300px;
}
If you want your div to be centered you can also play with the margin:
margin: 0px auto;
There is a lot of way's, you can make another class like .main-container and position through the margin like
.main-container
{
margin-left:200px;
}
now in html write your div inside the maincontainer class like
<div class="main-container">
{
<div class="your class here">
your data
</div>
</div>
you can also play with margin, and for more information google it...
this is the simplest and easy way to apply as well as to understand, hope it will solve the issue...
Are you trying to center the div? Based on your last sentence: "align:center; and position:center;" that's what it sounds like. Because you've defined a width already, and assuming that other styles are not interfering the following should work to center your div: (notice the margin)
div { background-color: White; opacity:0.7; width: 380px; height: 325px; margin:0 auto; }
Otherwise, if you are trying position the div anywhere else, do a search for positions absolute and static.
Try this:
.My_div {
position: absolute;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
Here are some examples! http://www.w3.org/Style/Examples/007/center.en.html#vertical
let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot).
So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?
Thank you very much indeed!
Matteo
You could use javascript yo get the size of the image and then set the css left value needed.
Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.
You should wrap the image in another block element and put a negative left position to the image.
Something like this:
<div id="something">
<div class="imagewrap">
<img>
</div>
</div>
Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.
have you tried;
name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }
give that a go.
No need to use Javascript, this can be done in CSS.
The required HTML: (you must change the div to an img obviously)
<div id="container">
<div id="imgwrapper">
<div id="img">Change this div-tag to an img-tag</div>
</div>
</div>
The required CSS:
#container
{
position: absolute;
left: 200px;
top: 100px;
height: auto;
overflow: visible;
border: 2px dashed green;
}
#imgwrapper
{
position: relative;
margin-left: -50%;
margin-top: -50%;
padding-top: 25%;
border: 2px dashed blue;
}
#img
{
display: block;
width: 200px;
height: 100px;
border: 2px solid red;
}
Click here for a jsFiddle link
The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;)
But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.
Probably one of the simplest solutions is to place the image in the upper left corner at position
left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:
#theDiv {
position: absolute;
left: 100px;
top: 100px;
background: yellow;
width: 200px;
height: 200px;
}
#theImage {
background: green;
position: absolute;
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>
I have a centered div and was wondering how can i attach a div on its right,
there is a title DIV on top, then the yellow centered DIV and this SOCIAL SHARING DIV I'd like to attach on the right.
Thank you!!!
Add it inside the yellow div, and position it as follows:
#yellowdiv { position: relative; }
#sidebar { position: absolute; left: 790px; top: 10px; }
It would be perfectly feasible to use the yellow div as the parent element for the brown div; the social data is all relevant info to the video. In that case, if you want, use the following:
#video {
position: relative;
}
#brown {
position: absolute; top: 0; left: 100%; /* this guarantees that it'll line up at the very end of #video */
}
Demo
http://jsfiddle.net/KXvpV/1/
Code
HTML
<div id="one"></div>
<div id="two">
<div id="social"></div>
</div>
CSS
#social { position: relative; top: 20px; right: -201px; }
Try making the yellow div position:relative, put the sidebar div inside it and make it position:absolute with values of top:0 and right:-XXX where XXX is the width of the sidebar plus the margin you require.