I have two div and I need to second div to overlap first div.
<div id="behind">some text here</div>
<div id="above">some text here</div>
I need 2nd div to overlap first.
You need to set your divs' position to anything other than default(which is static). So, set it to absolute, fixed or relative and make them overlap each other by adjusting their x,y co-ordinates.
With default position, each element takes up its own space on the rendered page and pushes other elements downwards (or horizontally further), so these elements come one after another.
Setting position to absolute or fixed takes the element out of normal flow and the element does not take any ground space on the page now. Now, it can sort of hover above other elements.
#container
{
position: relative;
}
#container > div
{
background-color: orange;
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
#container > div:nth-child(2)
{
background-color: green;
left: 50px;
top: 50px;
}
<div id="container">
<div></div>
<div></div>
</div>
Related
I have a UI built in vue.js that I need to add tooltips to. I need the tooltips to be placed to the left or right of a specific div in the UI. I've been able to get my desired look by setting the tooltips to position absolute but this is not responsive so on some screens the tooltip does not align with the target div.
The UI is fairly complex so I'm trying to avoid having to rebuild the layout with flexbox/grid. I'm looking for a way to 'anchor' the tooltip to its corresponding divs using javascript.
https://codepen.io/joeymorello/pen/ZEeWmGd Here I am playing with append to and insertBefore but I would still need to fine-tune each tooltip location using CSS. Is there a way to just anchor one div right next to another div so the tooltip always follows its parent div?
const head = document.querySelector('.head')
const body = document.querySelector('.body')
const toolTipOne = document.querySelector('.tool-tip-1')
const toolTipTwo = document.querySelector('.tool-tip-2')
$(toolTipOne).appendTo(head);
$(toolTipTwo).insertBefore(body);
Apply position: relative to .body and append the tooltip inside it. Then you can easily position it with absolute relative to position of .body using top, left etc:
https://codepen.io/tilwinjoy/pen/QWpNJdY
Why not use pure css for this? You can use position relative on the element, then use its pseudo ::after element and set its position to absolute. Then call on the left, top, right and/or bottom properties to place your pseudo element on the page relative to its parent that has position relative set.
// example of how to change the content of a pseudo tag with JS and CSS variables using the root element
let root = document.documentElement
let headTTInfo = 'Maybe you want to change the Head tooltips content via JS?'
let bodyTTInfo = 'Here is content for your body elements tool tip generated with JS.'
root.style.setProperty('--body', `"${bodyTTInfo}"`)
root.style.setProperty('--head', `"${headTTInfo}"`)
:root {
--head: 'this is content for your head elements tool tip';
--body: 'this is content for your body elements tool tip'
}
/* This min-width on the body will ensure that your absolutely positioned element
is within the body and its display is not completely taken out of the
viewable container,
125px(tooltip offset) + 500px(width of parents) + 125px(tooltip offset) = 750
gives us 10px padding on each side if screen width less than the width of the
parents elements, we do this because postion absolute takes its positioned elements
out of the normal flow of the document. */
body {
min-width: 770px;
}
.head {
margin: 0 auto;
width: 500px;
height: 250px;
background-color: green;
position: relative;
}
.body {
margin: 1rem auto;
width: 500px;
height: 250px;
background-color: pink;
position: relative;
}
.head::after {
content: var(--head);
position: absolute;
left: -125px;
top: 40%;
width: 100px;
height: auto;
padding: 5px;
background-color: teal;
}
.body::after {
content: var(--body);
position: absolute;
left: 515px;
top: 40%;
width: 100px;
height: auto;
padding: 5px;
background-color: orange;
}
<div class="container">
<div class="head">HEAD</div>
<div class="body">body</div>
</div>
I want to align the bottom element in an HTML file on top of the parent element, I do not want to overlay it, I literally want the bottom element to be on top of the top element:
Example:
HTML:
<div class="top-container"></div>
<div class="bottom-container"></div>
CSS:
.top-container {
width: 200px;
height: 200px;
background-color: green;
}
.bottom-container {
width: 200px;
height: 200px;
background-color: red;
}
Current Output:
Expected output: I want the red box to be above the green box.
If you can wrap the two elements in a div, if they are not already wrapped, then in the container element, display: flex; flex-direction:column-reverse;... if there's really no container element, your best bet is position: relative on the bottom element and bottom: 400px. They won't switch spots, but the red one will be ontop of the green one.
How can I make div cover the object tag on HTML for IE11, object tag is activeX for IE.
I want to make div layer cover the object tag.
The trick is to wrap your object tag in a container div. Set the dimensions of the activex component on the container and set the containers position to relative.
Drop another div - as a sibling to your activex component, and set its position to absolute. This will allow it to float/start at the start of the container (just like your activex) by setting its top to 0. Set this div's height and width to 100% to fill the whole container. Since your container has the same dimensions that your activex, this should cover it up.
#container {
position: relative;
height: 200px;
width: 200px;
}
#object {
height: 200px; /* emulate the objectx height */
width: 200px; /* emulate the objectx width */
background-color: yellow;
}
#overlay {
height: 100%;
width: 100%;
background-color: green;
position: absolute;
top: 0;
}
<div id="container">
<div id="object"></div>
<div id="overlay"></div>
</div>
http://plnkr.co/edit/H405MbFN9a1wxzqXkYXz?p=preview
Play around with the Plunker to see what happens and learn how it works.
In my webpage I have have a block with an background and below I have a button that should continue the background.
Here is an example. The left image is what my webpage is now, and the right image is what the webpage should be. You can see that the background continues on the button.
My code structure is something like:
<div id="section-1">
<div class="shown-content">
<div class="background"></div>
<div class="content">
... here are shown contents ...
</div>
</div>
<div class="hidden-content">
... here are hidden contents ...
</div>
<div class="button-content">
<span class="button">FOLD OUT</span>
</div>
</div>
The functionality is that when you click on the button, it triggers the JQuery slideToggle and it shows/hides the hidden-content div.
My idea is to set the button background the same width and height than the content background and then position it where appropriate. But I'm a bit lost because I don't find any way of doing this, and maybe you know a better way.
Let's say your placeholder for the image is 100px in height and the button is 30px.
Let's say your button always are in the center of the main image div.
Then you need an image that is 130px high, where the background position is set to center top and the buttons background position is set to center bottom.
Sample
.imgdiv {
background-position: center top
}
.buttdiv {
background-position: center bottom
}
If your button isn't in the center you need to adjust the "center" part of background position to make it match the main image
Your initial idea is probably the best solution.
Use background position to correctly position you div.
.button-content{
background: url('') no-repeat 200 100%;
}
Numbers afer no-repeat are X position Y position of background image.
I've found this solution, hope it will help you.
Place the fold out button absolute in the relative positioned #section-1.
While placing it absolute, it will only take the width it needs. Then we use the pseudo-classes :before and :after to fill the space on the left and the right with the background color of the body (in my example white).
The HTML looks like this (expandable with your rest code):
<div id="section-1">
<div class="hidden-content">
hidden content
</div>
<div class="button">
Fold out
</div>
</div>
And the CSS:
#section-1 {
min-height: 100px; /*use min-height so it will expand */
background: url('pic.jpg');
position: relative;
padding-bottom: 30px; /* height of .button */
overflow: hidden; /* to hide the :before and :after */
}
.button {
position: absolute;
bottom: 0;
right: 20px;
height: 30px;
width: 75px;
text-align: center;
}
.button:before, .button:after {
content: ' ';
background: white;
position: absolute;
width: 1000px;
left: -1000px;
height: 30px;
}
.button:after {
left: 100%;
}
.hidden-content {
display: none;
}
And a demo.
I have created this site and am trying to implement fixed text on the first slide (the one with the Nike basketball). Currently, I have the text 'The first of its kind' as part of the background image. Is it possible to separate it from the background and place the text in its own div?
I am stumped for ideas as the first slide is created by using three separate div - one for the top portion of the ball, the second for the bottom portion of the ball, and the third as the magnification of the ball. I thought of attaching the text within the first and second div, but it causes the text to scroll with the page as oppose to fixing it in place.
Site link: http://www.sfu.ca/~jca41/stuph/parallaxTest/parallax03/parallax03.html
Yes, use position:fixed with left and top css attributes.
e.g.
#fixedText {
position:fixed;
left:100px;
top:50px;
}
EDIT:
To accommodate the overlapping of slides, you would have to apply a z-index to the slides and the text.
For instance you could give the page class a z-index of 2 (and position:relative or the z-index doesn't take effect), the #fixedText rule a z-index of 1, and the #first rule a z-index of 0. This would create the layering you are after:
#fixedText {
position: fixed;
left: 75px;
top: 120px;
font-size: 35pt;
color: white;
z-index: 1;
font-family: helvetica;
}
#first {
background: url(images/01.jpg) no-repeat fixed;
height: 1000px;
z-index: 0;
}
.page {
margin: 0;
padding: 0;
overflow: auto;
width: 100%;
z-index: 1;
position: relative;
}