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>
Related
I have some code that has worked for me in the past but is currently not executing.
I honestly don't think the problem is in the Javascript but instead is either in the HTML or CSS. After all, I just copied and pasted the code and changed what was needed but I think I made a mistake in the HTML or CSS.
I just don't know where or if it is even something in them or if it's just my lack of experience with coding. I'll get to the code itself now.
if (moveKey.key === 's') {
$("div").animate({
top: "150px"
});
}
.sign {
position: absolute;
color: green;
width: 100px;
height: 100px;
left: 10px;
}
div {
position: absolute;
top: 100px;
left: 400px;
font-size: 100px;
color: red;
}
h2 {
position: absolute;
left: 400px;
top: 130px;
font-size: 50px;
}
h3 {
position: absolute;
left: 480px;
top: 132px;
font-size: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>Hello</div>
<h2>and</h2>
<h3>welcome</h3>
<div id="sign" class="sign"></div>
and here's a link to the fiddle if you want it.
I've added an event listener around your code so clicking 's' would work.
window.addEventListener('keydown', function(moveKey) {
if (moveKey.key === 's') {
$("div").animate({
top: "150px"
});
}
})
.sign {
position: absolute;
color: green;
width: 100px;
height: 100px;
left: 10px;
}
div {
position: absolute;
top: 100px;
left: 400px;
font-size: 100px;
color: red;
}
h2 {
position: absolute;
left: 400px;
top: 130px;
font-size: 50px;
}
h3 {
position: absolute;
left: 480px;
top: 132px;
font-size: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>Hello</div>
<h2>and</h2>
<h3>welcome</h3>
<div id="sign" class="sign"></div>
How can I scale the screen dynamically based on resolution when the code looks like this?
.drawing-board {
width: 25%;
height: 25%;
background-color: black;
position: relative;
}
.drawing-board .box-1 {
width: 20px;
height: 20px;
background-color: yellow;
position: absolute;
left: 90px;
top: 90px;
}
.drawing-board .box-2 {
width: 20px;
height: 20px;
background-color: lime;
position: absolute;
left: 30px;
top: 30px;
}
<div class="drawing-board">
<div class="box-1"></div>
<div class="box-2"></div>
</div>
Is there any simple examples for this case?
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>
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>
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>