Question:
Is it possible to prevent this behaviour?
What I tried:
Changing Z-index and searching forums. Challenge is prober key-words for prober search. Mostly get hits about preventing scroll behind fixed divs.
A few JS suggestions but all with flicker.
Real-world application:
Nav/close not preventing scroll on hover.
HTML
<div class="box">
<div class="nav">nav (close)</div>
More text in full example. (lorem ipsum)
</div>
CSS
.nav {
position: fixed;
top: 80px;
right: 80px;
padding: 50px;
background-color: pink;
border: 3px solid red;
}
.box {
position: fixed;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
border: 3px solid red;
overflow: scroll;
}
https://jsfiddle.net/johnmichealsen/nyo5Lzck/8/
How about using position sticky instead of fixed? This would require an added container element of some sort wrapping the text content.
https://jsfiddle.net/Lmp6bagq/
.nav {
position: sticky;
top: 80px;
right: 20px;
float: right;
width: 200px;
padding: 50px;
background-color: pink;
border: 3px solid red;
z-index: 1;
}
.content {
position: absolute;
width: 100%;
}
.box {
position: fixed;
top: 50px;
right: 50px;
left: 50px;
bottom: 50px;
border: 3px solid red;
overflow: scroll;
}
Add this CSS styling to your fixed div to allow scrolling while hovering over the nav element.
pointer-events: none;
The downside to this solution is that you'll no longer be able to click on the element to use it as a button.
Related
In the following solution, I can't seem to be able to centre to the screen the image appearing at hover.
How can I solve this? Is this a CSS position issue or can be resolved in JS?
https://jsfiddle.net/Mengolor/2wzv6tr1/1/
div {
position: relative;
border: 1px solid gray;
border-radius: 6px;
width: 600px;
height: auto;
top: 250px;
left: 100px;
}
img#image {
position: absolute;
display: none;
z-index: 99;
max-width: 50vw;
transform: translate(-50%, -50%);
}
h3 {
padding: 40px;
}
span:hover img#image {
display: block;
pointer-events: none;
}
$(document).mousemove(function(e){
const { scrollTop, scrollLeft } = document.documentElement;
$("#image").css({left:e.clientX + scrollLeft, top:e.clientY + scrollTop});
});
Instead of making your position attribute relative, try position:center;
div {
position: center;
border: 1px solid gray;
border-radius: 6px;
width: 600px;
height: auto;
top: 250px;
left: 100px;
}
I tested this in the JSFiddle console, and it seemed to work.
i need to position 2nd element is next to the first element.So i set top value as 100%. the starting point of 2nd element is varies when device pixel ratio as 1.5.
Machine : Lenovo YOGA 500,
Scale : 150%,
Resolution: 1920 * 1080,
Browser: Except Firefox
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
</div>
this issue occurs only when device pixel ratio as 1.5.
the arrow class element start position varies based on device pixel ratio.i need to remove border top of red highlighted element
Kindly guide me any solution on this?
Thanks is advance
Definitely an interesting problem. The only way I was able to remove that extra line was to have another, slightly smaller div box within the arrow:
HTML
<div class="wrap">
<div class="content">Content area</div>
<div class="arrow"></div>
<div class="secondary-arrow"></div>
</div>
CSS
.wrap {
background-color: #fff;
border: 1px solid #ef36d8;
position: absolute;
top: 70px;
}
.content {
width: 100px;
height: 100%;
padding: 5px;
}
div {
box-sizing: border-box;
}
.arrow {
position: absolute;
width: 16px;
height: 8px;
left: 50px;
top: 100%;
background-color: #fff;
border: 1px solid #ef36d8;
border-top: 1px solid #fff;
}
.secondary-arrow {
position: absolute;
width: 14px;
height: 7px;
left: 51px;
top: 100%;
background-color: #fff;
}
Trying to figure out how to create a gap in a CSS left border around an image via CSS or JavaScript/jQuery.
I've found several answers how to do this with a gap on the top or bottom border, but couldn't figure out how to apply this to a left border.
Here (https://ibb.co/cGS0vk) is an image of what I try to achieve.
Here is my HTML so far:
<div class="frame">
<img class="quote" src="quote.jpg">
<h2>Heading<h2>
<p>Lorem ipsum<p>
</div>
And here is the CSS:
.frame {
Border-top: 10px sloid grey;
Border-right: 10px sloid grey;
Border-bottom: 10px sloid grey;
}
.quotes {
position: relative;
right: 100px;
}
You can do it by using pseudo elements like :before and :after.
.box {
position: relative;
overflow: hidden;
width: 100px;
height: 50px;
border: solid #000;
border-width: 5px 5px 5px 0;
}
.box:before,
.box:after {
content: '';
position: absolute;
background: #000;
height: 30%;
width: 5px;
top: 0;
left: 0;
}
.box:after {
top: auto;
bottom: 0;
}
<div class="box"></div>
Best idea I can come up with using minimal amount of requirements:
Use the ::before/::after pseudo elements to place a background-color-matching element over top of an existing border. This essentially "slices" part of your border away.
HTML:
<div class="wrap">
<div class="box"></div>
</div>
CSS:
.wrap { position: relative; width: 300px; height: 300px; background-color: #fff; }
.box { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 200px; border: 10px solid #8af; }
.box::before { content: ''; position: absolute; width: 10px; height: 100px; margin: auto; left: -10px; top: 0; bottom: 0; background-color: #fff; }
JSFiddle: https://jsfiddle.net/gam9s0mz/
Edit As noted, this method wouldn't work well with a background image. But only with solid background color matching.
I'm trying to align a div in the center, but neither text-align: center, nor margin: 0 auto, seems to work on the absolute positioned element. I'm assuming neither works on absolute positioned elements. In this case, what should I do instead?
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
height: 250px;
margin: 0 auto;
text-align: center;
}
#absolute {
border: 1px solid red;
position: absolute;
display: block;
bottom: 0;
margin: 0 auto;
cursor: pointer;
}
<div id='wrap'>
<div id='absolute'>Click Me</div>
</div>
Without changing the HTML, the easiest approach to center the element horizontally would be to combine left: 50% and transform: translateX(-50%). This will essentially position the element 50% to the right and then displace half of the element's width by transforming it -50% to the left. In doing so, the element will be centered horizontally regardless of the width which means that you don't need to hardcode any values.
position: absolute;
left: 50%;
transform: translateX(-50%);
Updated Snippet:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
border: 1px solid red;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 0;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">Click Me</div>
</div>
Alternatively, if you can change the HTML, simply add left: 0 and right: 0 to the absolutely positioned element element in order for it to take the width of the parent container. Then you can add text-align: center in order to center the child element:
Updated Snippet:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
position: absolute;
left: 0; right: 0;
bottom: 0;
text-align: center;
}
#absolute > span {
border: 1px solid red;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">
<span>Click Me</span>
</div>
</div>
Since you know the size of the wrapper, you can just add left: 250px (half the wrapper size) to the css of your absolutely positioned element.
I have a div overlay which pops up when a link is clicked, my problem is you have to scroll to click the link, then the overlay remains at the top of the page instead of the area the user is currently looking at.
You can see it here by scrolling down and clicking on any of the links e.g. 'multiple orders 'here' and the terms and conditions at the bottom.
Here is the CSS:
.black_overlay{
display: none;
position: absolute;
/*top: 0%;
left: 0%;
width: 100%;
height: 1000px; */
top: 0px;
right: 0px;
left: 0px;
bottom: 0px;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 5px solid blue;
background-color: white;
z-index:1002;
overflow: auto;
}
And the JavaScript:
here
Use position: fixed on your overlay elements (.black_overlay and .white_content) instead of position: absolute;