How to position second div over first div? - javascript

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

Scrollable Overlay with Fixed Content Underneath

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 to achieve div overlapped to another div?

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>

How to split text horizontally equal on left and right side of element on overflow?

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>

Overlay fixed on top of div and keep position page scrolled

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>

Content over image not aligning vertically

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.

Categories

Resources