I have an absolute positioned element inside a div that is hidden (opacity:0), when hovering I set the opacity to 1. When the div ends the transition part of the content moves 1px down and the absolute positioned elements get 1px narrower.
This only happens on Google Chrome.
I made a small video to show what's happening
And this git to show the markup and styles: https://gist.github.com/lucasfercunha/9932819
Unfortunately I wasn't able to reproduce the issue in a small JSFiddle.
Related
I've created a div that I have positioned absolutely over this map:
Here, the element I'm talking about is a div containing the four white ovals. So this div has position: absolute; z-index: 1. Now notice the hamburger button in the top right - this opens the side navigation menu, like this:
However, as you can see, the aforementioned div is rendered on top of the the nav menu, which I've assigned a z-index of 2 to. (I've also tried significantly higher numbers). I seemingly can't tweak the z-indicies such that the side menu renders above this div. How can I fix this?
This is not an issue when I set the position of the div to relative, however, for aesthetic purposes I need it absolute.
It is worth noting that the side menu is contained in a wrapper element, which comes before the main tag that the aforementioned div is within, i.e
<wrapper> /*side menu is here */ </wrapper>
<main> /* div with ovals is here */ <main>
I don't know how your Side Menu is rendered, is the menu in the wrapper or the button, maybe it's been appending outside the wrapper.
If this isn't the case than try adding an extra class to a container (body or html) does also work if the Side Menu is open.
Than add a css rule which applies on the overlay buttons, but check if the open class is appended and than change the z-index to -1
Example:
#buttonDiv {
z-index: 1;
}
body.sideMenuOpen #buttonDiv {
z-index: -1;
}
I hope I could help
A div which contains an image has rounded corners using border-radius and overflow:hidden.
The div also contains another div with an orange background and some white text.
When the second div is placed over the image using a negative margin, the result is that the orange background is hidden behind the image, but the white text appears over top of the image. Why is this?
Fiddle: http://jsfiddle.net/nq9Jv/
Further question: how do I make the orange div appear fully "above" the image, bearing in mind that I cannot use position: relative because that would take it out of the flow and thus not allow the border radius of the first div to conceal a part of the second.
I am not sure the reason that the orange background doesn't appear above the image when using a negative margin.
I have tweaked your example a bit, and by using position: relative on the parent element and position: absolute on the child element, made the orange div appear above the image while maintaining the border-radius concealing the child element.
http://jsfiddle.net/nq9Jv/4/
Is that what you want?
containerdiv has two images, I make them display left and right:
.container {
background-image: url('img/left.png'),url('img/right.png');
background-position: left,130px;
overflow: visible;//this line doesn't work
}
currently, right.png is out of the right boundary of the container div and is hidden behind another named div2 which is at the right side of the container div.
How to make right.png image display on top of div2?
see below structure:
[left.png------ 'I am container div'--------- ][right.png-----I am div2 -------]
for some reason, it is not possible to change the css of div2, so I am wondering if it is possible to set some attribute inside container div then right.png can show up.
see below I draw a picture: I set right.png 125px to show, ideally, it would cover the grey triangle.
Can not add padding to the container, can not change position of div2 (because there are other menus share this part, whole part of container div would turn grey if other menu was clicked.)
Is div2 positioned absolute? If so, you can only place .container higher by positioning it absolute as well and setting the z-index higher than div2, or by placing .container after div2 in the DOM.
On this fiddle:
http://jsfiddle.net/TechplexEngineer/nFZ8e/1/
How could one get the blocks element to fill the rest of the sidebar?
Thanks,
Blake
Edit: How can I make it so when I re-size the window the scrolled area remains stuck to the bottom. (No red shows beneath)
http://jsfiddle.net/TechplexEngineer/nFZ8e/7/
Add overflow: hidden; to your sidebar, and set padding-bottom: 9999px; on your block-level element that you want to extend all the way down.
http://jsfiddle.net/nFZ8e/3/
I have a problem positioning a DIV with Chrome on this page. When I enter text into the red DIV it moves it down (doesn't occur in Firefox).
This shows how it was before putting why into the red DIV.
The height of the boxes is not being considered for vertical alignment (perhaps because the height is applied by the id and the display:inline-block is being applies by a class?). To solve this just add vertical-align:top; to your .box class.
BTW, since the heights are all the same, it might be easier to just put these in a container div to control the width and use float:left;