This question already has an answer here:
How to make a border overlay child div?
(1 answer)
Closed last month.
Behold the image.
I have 2 divs. One is a gray box and the other is a bordered div overlapping it.
<div class="container">
<div class="border-overlap"></div>
<div class="box">
There's text here and some links which should be clickable.
</div>
</div>
The issue: I cannot click any links inside the gray box because the bordered div overlaps it.
How can I make the links in the gray box clickable through the bordered div?
I have to accomplish this without:
Wrapping the gray box in the bordered div
Giving the links inside the gray box a greater z-index because those links will then overlap the border (See image. The word "box", even if it is a link and will be clicked, should stay behind the border)
You could add
.border-overlap {
pointer-events: none;
}
so any click event on that element will be captured from the element below
As a side note I'd suggest to use a pseudoelement instead of an empty element just for styling purpose
.box {
background: #ccc;
width: 12rem;
aspect-ratio: 1;
display: grid;
place-content: center;
margin: 2rem;
position: relative;
}
.box::before {
position: absolute;
content: "";
inset: 0;
border: 5px yellowgreen solid;
transform: translate(-1rem, -1rem);
pointer-events: none;
}
<div class="container">
<div class="box">
There's text here and some links which should be clickable.
</div>
</div>
Related
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.
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>
I have 2 div, one in the front and one in the back. The front will popup only when the button was pushed. If the front div isn't displayed, the background div can be scrolled. In the contrary, if the front div is displayed, the background div scroll will be disable. But the front div can still be scrolled.
I have tried using css by applying no-scroll css to the background div.
.no-scroll {
position: fixed;
overflow: hidden
}
But every time I applied no-scroll class to the element, it will bounced back top the top.
I also followed
this article
But it disable the entire window scroll and also the font div too. Any suggestion?
I think you should wrap both divs in a container and the toggle class on that. Something like this
var btn = document.querySelector('button'),
wrapper = document.querySelector('.wrapper');
btn.addEventListener('click', function(){
wrapper.classList.toggle('modal-is-visible');
});
html, body { height: 100% }
.wrapper {
height: 500px;
overflow: scroll;
border: solid 2px black;
padding: 2rem;
}
.lower_div {
background: red;
width: 100%;
height: 600px;
position: relative;
}
.modal {
display: none;
height: 20px;
width: 100%;
position: absolute;
z-index: 2;
background: tomato;
}
.modal-is-visible .modal { display: block;}
.modal-is-visible.wrapper { overflow: hidden; }
<button>
toggle
</button>
<div class="wrapper">
<div class="lower_div">
<div class="modal">
</div>
</div>
</div>
You could try adding an event listener on your background div on the event "blur" to trigger a style change so it puts your "overflow: hidden" style on the block.
You could also use a z-index to prevent the background div from coming back to front, just put a higher z-index to the front div and it should be good.
I'm trying to add a disclaimer section to the website I'm working on. I want a tab-like button at the bottom of every page which would open up a text area.
I searched codepen.io a bit and found a very simple way to do it. After removing non-relevant syntax, I tried to move the tab from the top of the page to the bottom.
Here's where I came across a problem. When the tab was at the top of the page, the text area would push down the tab when clicking on it.
Now that it's at the bottom, the textarea shows up above the tab, as the tab itselfs stays at the bottom of the page.
How do I make sure the text area pops up beneath the tab, pushing the tab up?
$(document).on('click', '#menu-tab', function() {
$('#menu-nav').slideToggle('slow');
});
body {
background-color: #333333;
text-align: center;
}
#menu-wrapper {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
#menu-tab {
background-color: #FC4349;
cursor: pointer;
margin: 0% 45% 0% 45%;
padding: 5px 10px;
}
#menu-nav {
display: none;
background-color: #FC4349;
margin: 0% 30% 0% 30%;
}
<body>
<div id="menu-wrapper">
<div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
<br>disclaimertextdisclaimertextdisclaimertext</div>
<div id="menu-tab" class="closed">Disclaimer</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
In case my description didn't give a clear image of the situation:
Tab at the top the of screen
Tab at the bottom of the screen
Move the html containing the disclaimer to below the tab
(Demo)
<div id="menu-wrapper">
<div id="menu-tab" class="closed">Disclaimer</div>
<div id="menu-nav">disclaimertextdisclaimertextdisclaimertext
<br>disclaimertextdisclaimertextdisclaimertext</div>
</div>
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.