Float second div above first div - javascript

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>

Related

How do I center my divs and make them stack with media query [duplicate]

This question already has an answer here:
Row-wrap center align in flexbox
(1 answer)
Closed 4 years ago.
So I have this which is supposed to be side by side in the middle before the media query hits and then when it hits it should stack on top of each other.
I have no idea why it's behaving th way it is.
I tried making it centered when ti's at its full width but it doesnt want to center and when I make the browser less than 400px they stack weirdly, they do stack on top but not centered.
.wrapper {
margin-top: 15%;
border : 2px solid #000;
overflow:hidden;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
float:left;
display: inline;
margin-left: 30%;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#two {
background-color: orange;
float:left;
margin-right:30px;
height: 400px;
width:250px;
border-right:2px solid #000;
}
#media screen and (max-width: 400px) {
#one {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
#two {
float: none;
margin-right:0;
bottom: 10%;
border:0;
}
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
Use flexbox and you can easily do this without the need of media query:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
display: flex;
justify-content: center; /*center the element*/
flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
}
.wrapper div {
min-height: 300px;
padding: 10px;
background-color: orange;
height: 400px;
width: 250px;
border: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div>
<div id="two">two</div>
</div>
You can also use inline-block instead of float:
.wrapper {
margin-top: 15%;
border: 2px solid #000;
overflow: hidden;
text-align:center;
}
.wrapper div {
min-height: 300px;
padding: 10px;
}
#one {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
#two {
background-color: orange;
display: inline-block;
height: 400px;
width: 250px;
border-right: 2px solid #000;
}
<div class="wrapper">
<div id="one">one</div><div id="two">two</div>
</div>

How can I put elements under a absolute position's element?

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>

Overlap page container border with a floating div border

I'm trying to make a tab float vertically in a page with dynamic generated content and overlap the right border the page content container with the left border of the floating div.
Here is a representation of what I'm trying to achieve:
In the following fiddle there's a basic skeleton of my page and an example of what is happening.
jsFiddle here
If I add position: absolute to this class the floating tab is correctly positioned but the page will not grow correctly as the content is appended nor will the footer be correctly positioned. On the other hand, if I remove the position absolute then the tab is not correctly positioned.
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
/*position: absolute;*/
}
How can I place the floating tab correctly overlapping the container border?
Notes: I cannot change much of the page structure (wrapping div and footer) but if needs be, the floating div can be appended after the #inner div.
Try this FIDDLE
Just add this rules to your .floating-tab:
margin-left: -1px;
z-index: 999;
float: left;
and float: left to your selector #page-content
Something like this:
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative; /* positoning context */
}
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%; /* fully left */
margin-left: 1px; /* width of border */
z-index:2;
}
$(function($) {
var element = $(".floating-tab"), originalY = element.offset().top, topMargin = 10;
$(window).on("scroll", function(event) {
var scrollTop = $(this).scrollTop();
element.stop(false, false).animate({ top: scrollTop < originalY ? topMargin : scrollTop - originalY + topMargin }, 300);
});
$("#B1").on("click", function() {
$("#innercontent").append("<p>text 1</p><p>text 2</p><p>text 3</p><p>text 4</p><p>text 5</p><p>text 6</p><p>text 7</p><p>text 8</p><p>text 9</p><p>text 10</p>");
});
});
.floating-tab
{
position: absolute;
border-left: 1px solid #fff;
border-top: 1px solid lightblue;
border-right: 1px solid lightblue;
border-bottom: 1px solid lightblue;
width: 32px;
text-align: center;
top: 10px;
left:100%;
margin-left: 1px;
z-index:2;
}
.floating-tab span
{
width: 24px;
height: 24px;
margin: 2px;
}
#page-content
{
border: 1px solid lightblue;
display: inline-block;
width: 180px;
padding: 10px;
min-height: 100px;
}
#inner
{
text-align: left;
margin-right: auto;
margin-left: auto;
display: inline-block;
width: 200px;
position: relative;
}
#outer
{
width: 100%;
padding-top: 10px;
display: block;
text-align: center;
}
#footer
{
margin-top: 17px;
background-color: lightblue;
border-top: 1px solid gray;
height: 48px;
}
#pagewrapper
{
min-height: 100%;
margin-bottom: -66px;
}
html, body, form
{
height:100%;
}
html
{
overflow: initial !important;
}
*, *::after, *::before
{
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagewrapper">
<div id="outer">
<div id="inner">
<div id="page-content">
<input type="button" value="add content" id="B1" />
<div id="innercontent"></div>
</div>
<div class="floating-tab">
<span>A</span>
<span>B</span>
<span>C</span>
<div>
</div>
</div>
</div>
<div id="footer">FOOTER</div>

Width of div taking all remaining width

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>

How to overlap other elements using resizable element?

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/

Categories