Hello I am trying to position a div on top of another div programmatically (javascript or css). The divs are completely separate meaning they look as follows:
<div class="bottom">
<img src="image"></img>
</div>
<div class="Top">
<img src="image2"></img>
</div>
I am new to javascript, css but mosty of the solutions I find are for separate divs inside a div which allows them to use zIndex. Please let me know if you would like me to provide more information regarding my question. Thank you for you help!!
You can set these with absolute positioning and change the z-index to pick what div you want on top. See fiddle: https://jsfiddle.net/c259LrpL/27/
.top{position: absolute; top: 0; left: 0; z-index: 1;}
.bottom{position: absolute; top: 0; left: 0; z-index: -1;}
The element positioned absolutely doesn't NEED the z-index property but it may help prevent conflicts down the road.
<style>
.stack-wrapper { position: relative; }
.bottom { position: static; z-index: 1; }
.top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
</style>
<div class="stack-wrapper">
<div class="bottom">
<img src="image"></img>
</div>
<div class="top">
<img src="image2"></img>
</div>
</div>
Set the wrapper div as position:relative; then the inner div will be position in the top if you use position:absolute; and top:0; :)
Related
I have 3 boxes on my page. The second (red) has to be fixed position. If the height of the green box increases, it has to increase to the top side, not to the bottom. So red one's position has to be fixed. Also if the red one's height increases, yellow has to move forward to the bottom. How can i do that?
Here is my css and html code:
#div1 {position:relative;top:0;bottom:0;right:0;background:green;width:100px;height:100px;}
#div2 {width:100px;height:140px;position:absolu;bottom:0;left:0;background:red;}
#div3 {width:100px;height:100px;position:relative;top:0;right:0;background:yellow;}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<!-- End your code here -->
</body>
</html>
This is possible with simple CSS using a few positioning tricks. First off, since everything orients around your red div, you need this to be the cornerstone. Setting this div to a relative position and inserting the remaining divs as children will allow all of its children to be positioned absolute relative to the parents location.
Because using absolute positioning as a percent will base off of the relative positioned parents size, we can use this to always attach the bottom div off of its base with position:absolute;top:100%. This places the child div at 100% distance from the top of your parent div.
Under that same logic, we can place a div always at the top of the parent using position:absolute;bottom:100%;
Note: I've changed your ID's to classes to allow multiple examples
.div1 {
width:100px;
height:140px;
position:relative;
top:200px;
background:red;
/* ignore this in a real case, these allow multiple examples to stack nicely*/
float:left;
margin-left: 5px;
}
.div2 {
width:100px;
position:absolute;
bottom:100%;
background-color:green;
}
.div3 {
width:100px;
position:absolute;
top:100%;
background:yellow;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="div1">
<div class="div2" style="height:100px;"></div>
<div class="div3" style="height:100px;"></div>
</div>
<div class="div1">
<div class="div2" style="height:200px;"></div>
<div class="div3" style="height:200px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:120px;"></div>
<div class="div3" style="height:227px;"></div>
</div>
<div class="div1" style="height:190px">
<div class="div2" style="height:20px;"></div>
<div class="div3" style="height:360px;"></div>
</div>
<!-- End your code here -->
</body>
</html>
When in doubt, create more parent or wrapper elements around the elements you want to manipulate.
* {
box-sizing: border-box;
}
.parent {
position: absolute;
top: 0px;
left: 0px;
border: 5px solid #0000ffc0;
width: 100%;
height: auto;
}
#div1-wrapper {
border: 2px solid lime;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div1 {
position: absolute;
bottom: 0px;
left: 0;
background: green;
width: 100px;
height: 20vh;
}
#div2-wrapper {
border: 2px solid #ff3300;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30vh;
}
#div2 {
width:100px;
height: 30vh;
position: absolute;
top: 0;
left: 0;
background: red;
}
#div3-wrapper {
border: 2px solid #ffff00;
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
}
#div3 {
width: 100px;
height: 100%;
position: relative;
top: 0;
right: 0;
background: yellow;
}
<body>
<!-- Start your code here -->
<div class="parent">
<div id="div1-wrapper">
<div id="div1"></div>
</div>
<div id=div2-wrapper>
<div id="div2"></div>
</div>
<div id=div3-wrapper>
<div id="div3"></div>
</div>
</div>
I created a wrapper around each of the elements named #div. The wrapper around #div1 is #div1-wrapper, and then #div2-wrapper, and so on...
Just to make sure that you overwrite any native browser position styling, give position: relative to each wrapper. With a top: 0 and left: 0. This will make sure that each element begins on the far left of the .parent element and each one begins just after the end of the last one.
If you want #div1 to grow and shrink with the size of the screen, give it a height in vh instead of pixels. #div1's outer wrapper should be position: relative, but the #div1 element itself should be position: absolute. (If you try to set its position to relative, it will stick to the top of its wrapper, rather than the bottom, as you want.
You said you wanted the red div (#div2) to be fixed from the top, but able to grow and shrink underneath. To achieve this, you need to set the position of #div2 to absolute, sitting inside of a position: relative wrapper.
You also need to make sure that it's wrapper (#div2-wrapper) has a height set in vh, instead of pixels. That way, the whole outer wrapper will grow and shrink. And to have the inner element (#div2) grow and shrink with it, set its height to 100% of the parent.
Next, set the #div3-wrapper to position relative and a set height of your choosing (in this case, 100px).
And lastly, set the #div3 (yellow div) to height: 100%;
To make the interactions more clear, I gave the outermost .parent element a blue border, and I gave each #div-wrapper a border color that matches the inner #div and I set box-sizing: border box on all elements.
I have this HTML structure:
<div class="container">
<img class="image" />
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
and this CSS code:
.container {
position: relative;
height: 88vh;
margin: 0;
}
.image {
height: 100%;
position: absolute;
margin-right: auto;
margin-left: auto;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.overlay {
position: absolute;
}
My requirements are as follows:
Make image fill the available vertical space and center it horizontally. (Works)
Make image overlay of the same size as the image - without using an absolute width attribute. (Does not work - problem)
Fix icons to specific spots on the image. (Using percentages for top and left attributes ... Not sure if this is going to be as easy as I currently think.)
How can I have it all - a horizontally centered image expanded to fill the vertical space, an exact overlay and elements fixed to specific spot of the image?
While I would prefer a CSS hack, a Javascript solution will be considered, too, in case the width of the image needs to be transferred to the overlay programmatically.
One way of doing it would be to wrap the Image and the Overlay in a div and center that.
.container {
position: relative;
height: 88vh;
margin: 0;
text-align: center;
}
.imagecontainer
{
position: relative;
display: inline-block;
height: 100%;
}
.image {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
<div class="container">
<div class='imagecontainer'>
<img class="image" src='imageurlhere'/>
<div class="overlay">
<div class="insides">more elements here</div>
</div>
</div>
</div>
Like this, the Image will set the width of its parent and in doing so also the width of the Overlay.
For my Website I'm attempting to lock the < Mat-Toolbar > to the top of the screen and then directly under that I want to lock the < Mat-Tabs > .
The issue I'm running into is that position: fixed in CSS is not locking it at all, and when I actually go to the site and inspect element it's putting in a < div >
How am I supposed to lock these two elements to the top, how am I supposed to bypass this auto created Div? I had a previous question similar to this but I solved that using Fixed and Absolute positioning, which that does not apply in this newer version of Angular/ Angular Material.
Source Code for my Website
Did you mean a sticky toolbar?
Just add a class to the toolbar and make it sticky (using the position attribute set to sticky):
.app-toolbar {
position: sticky;
position: -webkit-sticky; /* For macOS/iOS Safari */
top: 0; /* Sets the sticky toolbar to be on top */
z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}
Note: There is no support for position: sticky on IE 11. For more info on browser support for position: sticky, view this caniuse page.
You can probably achieve it by setting the style with ::ng-deep:
::ng-deep .mat-toolbar{
z-index: 998;
position: fixed
}
::ng-deep .mat-tab-group{
margin-top:55px !important;
}
::ng-deep .mat-tab-header{
z-index: 999;
width:100vw;
position: fixed !important;
background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
position: relative !important;
margin-top:55px;
}
DEMO
Even i was facing the same issue for my project. It is very diffiucult to make the toolbar fixed when it's declared inside <mat-sidenav-container>.
The reason why it's difficult is because both <mat-sidenav-container> and <mat-toolbar> uses transform: translate3d(0,0,0).
So the best way to proceed would be, to remove <mat-toolbar> from <mat-sidenav-container> and write an extenal css for the toolbar.
mat-toolbar {
height: 64px;
position: fixed;
z-index: 100;
width: 100% !important;
}
This solution worked for me.
Here's the solution boys.
1) Go the toolbar component and add this to its css/scss file :
:host {
// position: sticky;
// position: -webkit-sticky; /* For macOS/iOS Safari */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
2) Now go your root app that contains both the top bar and the router-outlet (app.component by default), and type the following on its css/scss file :
:host {
position: absolute;
top: 64px; // here you must specify the height of your topbar
bottom: 0;
left: 0;
right: 0;
}
Took my a few hours, but finally found the solution.
This works for me:
app.component.html
<div class="app-container">
<mat-sidenav-container>
<mat-sidenav mode="over">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</mat-sidenav>
<mat-toolbar>
<i class="material-icons hamburger-menu">menu</i>
<span>item A</span>
<span>item B</span>
</mat-toolbar>
<div class="app-body">
<router-outlet></router-outlet>
</div>
</mat-sidenav-container>
<div>
style.css
.app-body {
overflow: auto;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 64px;
}
.app-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
I have a HTML5 code. It has a parent div, and two child div. The parent div takes the whole page and each child div takes half a page. I add some images to the left div and some to the right div. Now I need to add an image to the parent div and keep the images on both left and right child divs visible, i. e I want all images super imposed and visubale.
What is the easiest way of doing this?
Code is like this:
<div id="parent"... >
<div id="leftChild">... </div>
<div id="rightChild">... </div>
</div>
Something like this?
http://moody.es/nons/kek.html
View page source to see the code.
The parent image has position: absolute; and I've the set the children's <img> to have z-index: 1;. When using z-index, the element in question must be positioned, hence the position: relative;
Depending on what you are doing you may need to make parent container relative or you can keep it as it is!
#parent{
width: 100%;
height: 100%;
position: absolute;
background-image: url("http://www.slate.com/content/dam/slate/articles/health_and_science/science/2015/07/150730_SCI_Cecil_lion.jpg.CROP.promo-xlarge2.jpg");
opacity: 0.75;
z-index: 9;
}
#leftChild{
width: 250px;
height: 125px;
position: absolute;
top: 0px;
left: 0px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBUBNygUQANzDPmF45jMi81XQ-nJ70Zw4LGvfpvpTLehLNjWZK8w");
z-index: 0;
}
#rightChild{
width: 250px;
height: 150px;
position: absolute;
top: 0px;
right: 0px;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSMc12mb4F7OWtwX_r9Sry0SOQgme7GUwXTHVhIipN2WkCWpGZnNQ");
z-index: 0;
}
#parent, #leftChild, #rightChild{
background-repeat: no-repeat;
background-size: 100% 100%;
}
<div id="parent"... ></div>
<div id="leftChild">... </div>
<div id="rightChild">... </div>
I am making a landing page, and this might sound like a stupid question, but my <h2> and <form> elements are not showing up anywhere on my page. I have tried everything I can think of and still, nothing. I'm baffled.
The photo I am using for my full screen background image is one off of photoshop with a grey square in the center (which looks like what some people do with z-index). In the background, it is cycling logo's in js as a kind of throwback design.
I am not sure if I am doing something wrong, or if there is something in my css, html, js making it so the text/form is not showing up.
index.html
<section id="bg">
<img src="img/bg.jpg">
<div class="container">
<div class="row">
<div class="col-lg-12" id="rotating-img-wrapper">
<img class="rotating-img" src="img/corona.png">
<img class="rotating-img" src="img/mc.png">
<img class="rotating-img" src="img/mtv.png">
<img class="rotating-img" src="img/op.png">
<img class="rotating-img" src="img/supercell.png">
</div>
</div>
<div class="text">
<h2>To learn more about our services, drop us a line</h2>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Email Address</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
</section>
css
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#rotating-img-wrapper img {
position: fixed;
width: 250px;
height: 750px;
}
.rotating-img {
display: none;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: #000000;
position: absolute;
}
javascript
$(window).load(function() {
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fades time (in milliseconds)
var fadeTime = 2500;
//number of items
var numberOfItems = $('.rotating-img').length;
//current item
var currentItem = 0;
//show first item
$('.rotating-img').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-img').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-img').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
If anyone can see an error(s) in my code that I cannot see, I would love to know. Thanks for the help.
I have some insight into how you might approach this layout.
I simplified your HTML slightly (removed the form and put in a simple line of text) so
as to concentrate on the various stacking layers due to the fixed and absolutely
positioned elements.
The key is that since your #bg element is fixed, it sets the reference point for
positioning any other positioned child elements, be it fixed or absolute.
In your original post, you set the offsets to be top: -50% and left: -50%, which
places the origin of the block outside of the visible viewing area.
As a result, h2 was positioned at the top left corner of #bg, hence not visible,
and the p text, which is in regular content flow, would also start to the top left
of the container block (#bg).
As a start, set the offsets to top: 0 and left: 0 with 100% for the width and height,
and then rethink about how to size your images in your image rotator and the background
image.
Now that you see where the elements are, you will make be able to make progress
with your layout.
body {
margin: 0; /* get rid of 10px border from default browser style sheet */
}
#bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
#rotating-img-wrapper img {
position: fixed;
width: 250px;
height: auto;
}
.rotating-img {
display: block;
position: absolute;
top: 0;
left: 0;
}
h2 {
color: #000000;
position: absolute;
top: 30%;
left: 50%;
}
<section id="bg">
<img src="http://placehold.it/500x500">
<div class="container">
<div class="row">
<div class="col-lg-12" id="rotating-img-wrapper">
<img class="rotating-img" src="http://placekitten.com/2000/4000">
</div>
</div>
<div class="text">
<h2>To learn more about our services, drop us a line</h2>
<p>Some other words ...</p>
</div>
</section>
You can use background-image: url(img/bg.jpg); in #bg, instead of adding the image directly and try to add something on it.
In your image CSS, do this in the CSS:
z-index:-1000;
The z-index controls what elements overlap other elements. The higher the z-index, the more in front an element will be. See if that clears anything up. Otherwise, there is another issue. I am also curious as to why you are using absolute positioning on all those elements.
In CSS try this code:
#bg {
background-image:url('img/bg.jpg');
}
And then remove the tag from the HTML page. I would also take a look at simplifying your code since you seem to have a ton of divs all wrapped within each other. Perhaps consider using a table if it suits your needs.