I cannot get the images on the right of the slider to overlay the following div underneath it. I've used a variety of different position and z-index variables and cannot get it to work.
Live Site
What I'm using for slider images:
.overlay-img{
position:absolute;
right:0;
z-index:9999;
top:-300px;}
What I'm using for the following div (underneath):
.lower-stack{
position:relative;
z-index:1;}
Effect I'm trying to achieve (image). Any help appreciated. What am I missing?
The swipper's outer most wrapper was having overflow: hidden, which prevent child content from being visible outside its boundaries.
.swiper-container {
margin: 0 auto;
overflow: hidden;
position: relative;
z-index: 1;
}
You can consider adding an id to that particular container, and make it overflow: visible:
#newID{
overflow: visible;
}
When you do that, slides start showing to the right side of the page and a horizontal scroll bar appear. To fix that, add overflow: hidden to .mainContent:
.mainContent{
overflow: hidden;
}
Don't set z-index: 9999 to the image, it is not needed.
Related
I have a site with a full screen overlay nav, which when triggered hides the overflow on the html element. This is to stop the page behind the nav being scrolled when the nav is open.
Stripped down SCSS (when nav is active) looks like this:
html.nav-is-active {
overflow: hidden
}
nav.active {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1600000;
}
My problem is when the nav is open the scrollbar disappears causing the page to jump - this is especially disorientating as there is a close button on the nav overlay which is supposed to line up with a menu button on the site.
My question is how can I best solve this? I can remove the overflow:hidden from the html element to preserve the scrollbar, but that then means the site can be scrolled unintentionally when the nav is open.
Any help appreciated
Mike
This is really hacky, but it should do what you want...
html {
overflow-y: hidden;
}
body {
overflow-y: scroll; // causes an empty scrollbar
height: auto; //set height = content so body can't overflow
}
You can make your scrollbar visible the same way in the overlay.
OR If you can figure out the width of the scrollbar (typically 15px on Mac and I think similar in Win 10) you can subtract from the overlay size or add padding. This is slightly better than setting the overlay to overflow-y: scroll since it won't cause scrolling INSIDE the overlay on small screens.
nav.active {
width: calc(100vw - 15px); // could be done with javascript
}
An alternative to block scroll without overflow: hidden; is position: fixed; overflow-y:scroll; so simply change this:
html.nav-is-active {
overflow: hidden;
}
with this:
html.nav-is-active {
position: fixed;
overflow-y:scroll;
}
You'll se an empty scroll bar, but the page will not "jump" anymore.
I am using animate.css to add some animations to a wesite.
Some animations like "fadeInLeft/Right" or "bounceInLeft/Right" make the horizonatl scroll to appear. This has easy fix, adding overflow-x:hidden to the parents.
But now I have an absolute positioned button, placed to be in the middle of two parents divs. THe parent div has overflow-x:hidden but it doesn't seems to affect the button because the position:absolute.
How can I avoid the horizontal bar to appear when the button is animated?
This is the website http://themescreators.com/demos/cuora/ the buttons are the circular white floating buttons below the intro slider and above the footer.
Try Overflow to hidden :
body {
overflow-x: hidden;
}
.hidden-thing {
position: absolute;
left: 100%;
width: 50px;
height: 50px;
opacity: 0;
}
Check this resource :
https://css-tricks.com/findingfixing-unintended-body-overflow/
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar
In brief example I'm trying to do a div chat example to simulate a facebook chat.
I fixed it on the right with z-index 300 to always be showed.
My problem is about height because some pages I have scroll and large height view and my chat div fixed on the same original page height, if I scroll up or scroll down I limit the height of my div.
I wonder it just fixed enough to stay visible on the page in the same original way even I scroll page up or page down.
My sample CSS is:
#chat {
position: absolute;
top: 0;
right: 0;
float: right;
height: 100%;
min-height: 100%;
width: 200px;
background-color: #6e9bfe;
z-index: 300;
}
Any tips would be very helpful, thanks!
If I'm right in thinking you want this div to stay in the same position as you scroll up and down the page you want to use position:fixed; instead of position:absolute; in your CSS.
Use position:fixed; instead of position:absolute;
I'm creating image slider, it's contains in big, 100% x 100%, absolute positioning popup div. And I need to block body scroll when slider is active. I tried overflow: hidden for body tag, in js - and it's not working, thereon I tried it in style.css, result was the same.
body {
position: relative;
overflow: hidden;
display: block;
}
So how to lock scroll for all page by css resources?
Use fixed positioning on your image
#myImage
{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
}