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/
Related
I have a layout wrapped with scrollbar component of react like this on this link: https://malte-wessel.com/react-custom-scrollbars/ this kind of scrollbar, and I need a tool tip to appear over the layout on the bottom when it is scrolling. Z-index does not seem to work.
I tried using z-index but no luck.
https://malte-wessel.com/react-custom-scrollbars/
What I need is this:
You can just add the position of the tooltip related to the hover
Change the css of the hover like this
.info__helper--withhover:hover {
.text-inside {
display: block;
position: relative;
top: 10px;
left: 3px;
}
}
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.
On mobile devices when a position:fixed; element appears on the screen the user can scroll the <body>, through the fixed element.
body,
html{
overflow: hidden;
margin: 0;
padding: 0;
}
#fixed {
background: red;
position: fixed;
left:0;
top: 0;
width: 200px;
height: 100%;
}
#content {
background: blue;
height: 3000px;
}
I tried to add overflow:hidden for <html> and <body> but it didn't help. I would like to prevent scrolling through the fixed element, but I would like to allow the scroll, when the fixed element is visible, but the user scrolls on <body>.
I tried this with ios and android devices. What is the best solution to solve this?
background:fixed
will make the rest of the body scroll through the fixed element. That is is the default behaviour. By the looks of it, you want the fixed element to be positioned at the top of your page. Why not keep it is a separate container with position absolute and rest of the body in a different container. Then, add the scroll to the rest of the body keeping HTML, body at 100% height. you may need to keep the height fixed for the 2nd container.
I made vertical dropdown menu in bootstrap. Everything works just fine except one thing. The whole submenu is positioned using fixed attribute, and when there is some more content of page, the whole submenu is scrolling with page.
Here you have example: Bootply
Is it possible to fix it?
The problem is that all the element before that dropdown are positioned relative which makes absolute position of width to 100% of body width difficult (read more). If you aren't looking for a JavaScript solution than with some changes to the mark-up and CSS(removing container class from li.inline-list , removing col-sm-3, changing col-sm-9 to 'col-sm-12', postioning nav link in center and using container-fluid instead of container to wrap them) I came up with this Bootply .Observe the CSS I have added
.top-main .dropdown-menu {
width: calc(100% + 60px);
position: absolute;
left: -30px;
}
Even though I could get the sub-menu to almost full length, container-fluid and col-x-x both leave 15px padding on both sides, so I had to give -30px position to left and add 60px to width using calc . Calc is supported by IE9+ only.
Change in your css this,
.top-main .dropdown-menu {
width: 100%;
position: absolute;
top: 87px;
z-index: 1000;
text-align: right;
padding: 5px 0;
margin: 0 auto;
}
This will make it stay
I have the following divs in my HTML:
<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>
which is directly inside my body.
With the following CSS:
body {
margin: 0;
padding: 20px 0;
}
.content {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.content {
position: relative;
z-index: 1;
border: #000 thin solid;
width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #000;
}
.bgimage {
position: absolute;
z-index: -1;
width: 1024px;
height: 768px;
margin-left: auto;
margin-right: auto;
background-image: url(bg1.jpg);
}
Basically, I have a Div that with a display of a background image, and I will have another Div on top of this with transparency. This current code works, but my problem is when I am trying to take the content div down from the top.
When I add margin-top:100px, for example, is also brings the image down. I thought it would not touch it if it is not on the same z-index? Why does adding a margin also force the bgimage div down?
I have also tried making the div with class of content a position of absolute and a zindex, but then this won't centre. How should I solve this?
your CSS should be
.bgimage { position: relative; }
.content { position: absolute; }
so the .content will be positioned relative to the .bgimage
your current CSS makes the .bgimage position relative to the document.
see this link on CSS positioning
z-index has no relation to positioning: it only affects the rendering order of your elements. Position: relative tells the browser to render the element at the place it should be, and offset it by eventual left, right, top or bottom coordinates. Therefore, margins, paddings, etc. still affect it.
Only position: absolute guarantees position independance.
I see no need for "z-index"es or "position: absolute" in your code at all -- unless you have other complications that you have not revealed to us.
To center the background on the DIV class="main":
body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}
The "center top" places the center-top of the background image on the center-top of the element it's applied to. You may want to apply a
min-width:1024px;_width:1024px;
to the same element -- to prevent a narrower window from hiding the edges (this will change how the element is rendered if the "viewport" is narrower than the background's dimensions).
The only thing your pre-modified code it can do that my modified code can't:
Crop the background image (if it is not natively 1024px x 768px) by using the css "width" and "height" properties
If the class="main" element already has a background image set, most browsers don't support the CSS3 required to stack multiple backgrounds on the same element
Some of what was stated about "z-indexing" and the "position" property above was correct but failed to mention:
you've taken your class="content" element out of "the flow". The ancestor elements won't grow when the content of class="content" element grows. This is an important and fundamental difference between "z-index"ed elements and elements that remain "in the flow".
Other side notes:
elements with the same z-index are stacked according to their order in the HTML (later in the HTML means they are drawn above on the screen)
"z-index"ing requires "position: (absolute|relative)", "z-index: (valid value)", and IIRC "(top|left|bottom|right): (valid value)" to take the element "out of the flow"
CSS absolute positioning is always done "relative" to the most recent ancestor that has a "position: relative", otherwise it uses the body tag by default. If the CSS you included is all that affects those divs, then your .content div will be positioned relative to the .main div, but your .bgImage will be positioned based on the tag.
If you want both .content and .bgImage to move in lockstep, then you'll need to add a "position: relative" to div.main.