JSFiddle link
z-index cannot be set to -1, positioning cannot be changed for first and second div.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first"></div>
<div class="second"></div>
Apply a transformation (without visible effects) on the second div e.g.
transform: scale(1);
https://jsfiddle.net/cbeaw84h/
Position your second div:
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
position: relative; // This
}
You should use position: relative and they'll overlay.
.second {
position: relative;
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
If you cannot touch the CSS code really, simply nest the second div inside the first.
* {
box-sizing: border-box;
}
.second {
height: 120px;
width: 100px;
background-color: yellow;
z-index: 1999;
}
.first {
position: absolute;
left: 0;
top: 0;
z-index: 0;
height: 100px;
width: 120px;
background-color: blue;
}
<div class="first">
<div class="second"></div>
</div>
Related
I need to make the overlay in this example be able to scroll all the way out of the screen. The content needs to be in a fixed position as it is in the example below. How can I allow the overlay div to be scrolled all the way outside of the viewport?
EXAMPLE SITE:
https://www.ssk.com/
HTML
<div class="test-overlay"></div>
<div class="test-content-container"></div>
CSS
.test-overlay {
background: orange;
position: relative;
width: 100%;
height: 100vh;
text-align: center;
z-index: 995;
}
.test-content-container {
background: rgba(156,64,81,1.00);
position: fixed;
top: 0px;
left: 0px;
font-size: 0;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
}
I solved it by adding 100% padding to the bottom of a container div containing these two elements.
HTML
<div class="test-complete-container">
<div class="test-overlay"></div>
<div class="test-content-container"></div>
</div>
CSS
.test-overlay {
background: orange;
position: relative;
width: 100%;
height: 100vh;
text-align: center;
z-index: 995;
}
.test-content-container {
background: rgba(156,64,81,1.00);
position: fixed;
top: 0px;
left: 0px;
font-size: 0;
width: 100%;
height: 100%;
min-height: 100%;
min-width: 100%;
}
.test-complete-container {
height: 100%;
width: 100%;
padding-bottom: 100%;
}
How can I achieve a <div> overlap so that the div #inner-block us in the foreground?
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
A simple solution would be to update your HTML like so:
<div id="block-1">
<div id="inner-block"></div></div>
<div id="block-2">
</div>
This works because it ensures that the ordering of block-2 and inner-block is relative to a common parent; block-1:
#block-1
{
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
z-index: 1;
}
#inner-block
{
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2
{
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
<div id="block-2"></div>
</div>
Hope this helps!
Simply remove z-index from #bloc-1. This will make .inner-block to belong to the same stacking context of #bloc-1 and not the one created by #bloc-1.
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.ref
This means that the 3 divs will belong to the same stacking context thus we can have any order we want
#block-1 {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
background-color: #999;
}
#inner-block {
position: relative;
width: 100px;
height: 100px;
margin: 20px;
background-color: #777;
z-index: 100;
}
#block-2 {
position: absolute;
width: 200px;
height: 200px;
top: 60px;
left: 60px;
background-color: #666;
z-index: 2;
}
<div id="block-1">
<div id="inner-block"></div>
</div>
<div id="block-2"></div>
I am trying to achieve the following effect for div content while user type text inside div (contentEditable="true").
.editor {
width: 200px;
height: 200px;
outline: 0;
position: absolute;
left: 25%;
border: 1px solid green;
}
<div class="editor" contentEditable="true">
<p>type here ...
<p>
</div>
How about something like this?
.editor {
width: 200px;
height: 200px;
outline: 0;
position: absolute;
left:25%;
border: 1px solid green;
word-wrap: normal;
}
.editor p {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div class="editor" contentEditable="true"><p>type here ...<p></div>
Do you mean something like the following:
var contents = document.getElementsByClassName('content');
for(let i = 0; i < contents.length; i++)
{
var content = contents[i];
var editor = content.parentElement;
var width = content.getBoundingClientRect().width;
content.style.setProperty('--content-width', width+'px');
editor.addEventListener('input', function() {
var width = content.getBoundingClientRect().width;
content.style.setProperty('--content-width', width+'px');
});
}
.editor {
width: 200px;
height: 200px;
outline: 0;
position: relative;
left:25%;
border: 1px solid green;
}
.editor p {
white-space: nowrap;
position: absolute;
z-index: 1;
width: auto;
min-width: var(--content-width);
top: 50%;
left: calc(-1 * (var(--content-width) / 4));
}
<div class="editor" contentEditable="true"><p class="content">type here ...<p></div>
p {
position: relative;
right: 100px;
width: 400px;
text-align: center;
}
Add this to your code.
What about this?
.input-outline {
width: 100px;
margin: 25px auto;
border: 1px solid green;
position: relative;
height: 500px;
}
input {
width: 300px;
border: none;
position: absolute;
top: 50%;
left: -100%;
transform: translateY(-50%);
background: transparent;
}
<div class="input-outline">
<input type="text" value="this a long text blablabla heheheheeheheheheh">
</div>
I've the following example below. When you click the yellow box, an overlay will be shown and it works fine. But when i then scroll down it ofc stays because it has a position fixed.
How can i make sure the overlay stay ontop of the .div when i scroll, aka so it "don't move"?
$('.modal').css("top", $(".div").offset().top).css("left", $(".div").offset().left).css("width", $(".div").css("width")).css("height", $(".div").css("height"));
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
background-color: yellow;
content: "";
}
body {
height: 500px;
background-color:black;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div"></div>
<div class="modal"></div>
Change your position to absolute.
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
Change the fixed position of the modal with a absolute position , place the .modal in the .div
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin: 100px auto 0;
height: 300px;
width: 300px;
background-color: yellow;
position: relative;
}
body {
height: 500px;
background-color: black;
}
.modal {
display: none;
position: absolute;
top:0;
left:0;
z-index: 2;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
.div content
<div class="modal"></div>
</div>
I think you want something like this, tell if i'm doing something wrong.
First you need to change position: fixed; with position: absolute; in modal class.
Then put modal class div into class div like this
<div class="div">
<div class="modal"></div>
</div>
check snippet for running in action
$(".div").click(function() {
$('.modal').addClass("loading");
})
.div {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 300px;
background-color: yellow;
position: relative;
}
body {
height: 500px;
background-color: black;
}
.modal {
display: none;
position: absolute;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat;
}
.modal.loading {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<div class="modal"></div>
</div>
I am trying to get my div container .home-img-text to center vertically in the middle of its parent div .home-img. I have tried setting .home-img-text to position: absolute, relative, I tried padding-top and a bunch of other things, it won't move at all from the top of its parent div.
This can be viewed at this site:
click here
I did not create a snippet because the image will not show with my parallex effect.
Does anyone see what is wrong?
CSS:
.home-img {
position: relative;
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.parallax-window {
min-height: 300px;
background: transparent;
position: relative;
}
.home-img-text {
position: relative;
z-index: 99;
color: #FFF;
font-size: 4em;
text-align: center;
top: 40%;
}
HTML:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
The proper way to vertically center a box model element is:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Update: this is what happens in your page:
.grand-parent {
position: relative;
width: 300px;
height: 300px;
top: 10%;
left: 50%;
transform: translateX(-50%);
overflow: visible;
border: 1px solid blue;
}
.parent {
height: 400px;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
<div class="grand-parent">
<div class="parent">
<div class="child">Quality Solutions</div>
</div>
</div>
To vertically center .child in .grand-parent instead of .parent remove position:relative from .parent.