How do I keep a resizable div from being overlapped by neighboring elements? I changed the z-index of the resizable div to have 1, and the rest 0.
This example will make it clear right away:
http://jsfiddle.net/gALUP/1/
HTML
<div id='grid'>
<div class='outline'>
<div class='container resizable'>
</div>
</div>
<div class='outline'>
<div class='container'>
</div>
</div>
</div>
CSS
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
z-index: 0;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
Remove z-index: 0 from .outline:
.outline {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
display: inline-block;
}
.container {
height: 100%;
width: 100%;
background-color: #ff0000;
}
.resizable {
background-color: #0000ff;
position: absolute;
z-index: 1;
}
http://jsfiddle.net/elclanrs/gALUP/2/
Related
Whenever the pink container touches the bottom of green container I want to make it unsticky. Is it possible? I tried but couldn't achieve it.
here's the code
also codepen link : Click Here
.container1 {
width: 500px;
height: 400px;
background-color: lightblue;
text-align: center;
margin: 0px auto;
position: sticky;
top: 0;
z-index: -1;
}
.container2 {
width: 300px;
height: 200px;
background-color: lightgreen;
text-align: center;
margin: 0px auto;
position: absolute;
top: 0;
left: 0;
z-index: -2;
}
.container3 {
width: 500px;
height: 400px;
background-color: pink;
text-align: center;
margin: 20px auto;
}
<div class="container1">
<div class="container2">
</div>
</div>
<div class="container3">
</div>
Here is my code:
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
As you can see, div.other_elements is under div.absolute_postion. How can I put that in the bottom of div.absolute_postion?
Give top:0 to .absolute_postion class and margin-top:30px to .other_elements.
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top:0;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
margin-top:30px;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
I see the height of .absolute_postion element is dynamic so you can achieve this with jquery.
You can use height() method to get the pixels of the div and apply margin-top with that value:
var val = $('.absolute_postion').height()
$('.other_elements').css('margin-top', val);
console.log(val)
.absolute_postion{
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top:0;
}
.other_elements{
border: 1px solid green;
height: 30px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
Note: Remember add top:0 to absolute_postion div.
Just Adding top margin equal to the height of absolute_position div
.absolute_postion {
position: absolute;
border: 1px solid red;
height: 30px;
width: 100%;
clear: both;
top: 0;
}
.other_elements {
border: 1px solid green;
height: 30px;
width: 100%;
margin-top: 32px;
}
<div class="wrapper">
<div class="absolute_postion">foo</div>
<div class="other_elements">bar</div>
</div>
Is there a way on hover two divs to affect one div different ways?
The best be to know the solution in CSS way, but if there is no CSS way then I am open to JQuery or Javascript way.
For example when I hover over div myData1, then I affect separator to have some style. And when I hover over div myData2, then I affect separator to be in any other unique way.
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData1:hover + #separator{
width: 50px;
heightL 100px;
background-color: #cba;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>
Using jQuery, this would be a solution:
$('.myData1').mouseover(function() {
$('#separator').css('background-color', '#cba');
});
$('.myData1').mouseout(function() {
$('#separator').css('background-color', '#666');
});
$('.myData2').mouseover(function() {
$('#separator').css('background-color', '#dba');
});
$('.myData2').mouseout(function() {
$('#separator').css('background-color', '#666');
});
.myData1{
width: 50px;
height: 50px;
background-color: #444;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="myData1">
</div>
<div id="separator">
</div>
<div class="myData2">
</div>
</div>
Just with css:
.wrapper {
position: relative;
}
.myData1 {
width: 50px;
height: 50px;
background-color: #444;
}
#separator {
width: 50px;
height: 100px;
background-color: #666;
position: relative;
top: -50px;
}
.myData2 {
width: 50px;
height: 50px;
background-color: #888;
position: relative;
top: 100px;
}
.myData1:hover ~ #separator {
background-color: #cba;
}
.myData2:hover ~ #separator {
background-color: #cba;
}
<div class="wrapper">
<div class="myData1"></div>
<div class="myData2"></div>
<div id="separator"></div>
</div>
.data{
position : relative;
height:200px;
width:50px;
display:inline-block
}
.myData1{
width: 50px;
height: 50px;
background-color: #444;
display:inline-block;
position:absolute;
top:0px;
}
.myData1:hover + #separator2{
width: 50px;
height: 100px;
background-color: blue;
display:inline-block;
}
.myData2{
width: 50px;
height: 50px;
background-color: #888;
display:inline-block;
position:absolute;
bottom:0px;
}
.myData2:hover + #separator{
width: 50px;
height: 100px;
background-color: #dba;
}
#separator{
width: 50px;
height: 100px;
background-color: #666;
display:inline-block;
position:absolute;
top:50px;
}
#separator2{
width: 50px;
height: 100px;
background-color: #666;
display:none;
z-index:99999;
position:absolute;
top:50px;
}
<div class="data">
<div class="myData1">
</div>
<div id="separator2"></div>
<div class="myData2">
</div>
<div id="separator"></div>
</div>
Try this
I am trying to put a top bar on the right of my left menu.
I put width: 100% of my #top_bar but there is so big. I would like that my top bar take only the remaining space of the screen.
HTML:
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
CSS:
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
height: 70px;
width: 100%;
}
Result:
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
top: 0px;
left: 200px;
right: 0px;
height: 70px;
}
You can use the margin left for the large div
CSS :
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
float: left;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
background-color: red;
margin-left: 200px;
height: 70px;
}
HTML :
<body>
<div id="menu_left"></div>
<div id="top_bar"></div>
</body>
Working Demo
Just add this to your css:
body {
margin: 0;
width: 100%;
overflow: hidden;
}
Try to use a 100% width container around your elements.
<div class="container">
<div id="menu_left">
</div>
<div id="top_bar">
NAVIGATION
</div>
</div>
See this pen I just created: http://codepen.io/anon/pen/MwodLx
Maybe this? You could only change width: 100% to right: 0. Also float: left is unnecessary.
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#menu_left {
background-color: #354052;
position: fixed;
height: 100%;
width: 200px;
}
#top_bar {
border-bottom: 1px solid #EFF0F3;
position: absolute;
background-color: white;
left: 200px;
right: 0;
height: 70px;
}
<div id="menu_left"></div>
<div id="top_bar"></div>
I have a canvas on div a and a gif image on div b. What I want to do is to hide my canvas without using display: none; by putting the div b over div a.
I achieve it before by using display none to hide div a. But now I want div ato stay there while div b floats above it.
This is the current scenario: JSFiddle
try it with position absolute on div a. note that
margin: 0 auto;
will not work here. so use 'left' and 'margin-left' to fix that.
jsfiddle
I would wrap the two elements you want stacked in a container div and absolutely position div .b over div .a.
.a, .b {
width: 200px;
height: 30px;
text-align: center;
}
.wrap{
position: relative;
margin: 0 auto;
width: 200px;
height: 30px;
}
.a {
border: 1px solid red;
background: red;
}
.b {
border: 1px solid green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: blue;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.xtra {
width: 100%;
height: 150px;
background: #000;
}
<div class="container">
<div class="xtra"></div>
<div class="wrap">
<div class="a">div a</div>
<div class="b">div b</div>
</div>
</div>
UPDATED FIDDLE
You could position them both absolute and set z-index to .b.
.a, .b {
margin: 0 auto;
width: 200px;
height: 30px;
text-align: center;
}
.a {
border: 1px solid red;
position: absolute;
}
.b {
border: 1px solid green;
position: absolute;
z-index: 1;
}
.container {
width: 300px;
height: 200px;
border: 1px solid #000;
}
.xtra {
width: 100%;
height: 150px;
background: #000;
}
<div class="container">
<div class="xtra"></div>
<div class="a">div a</div>
<div class="b">div b</div>
</div>