I have an image I want to animate, it should slide bottom up to its position. I'm using Angular 5 animations and so far my animation works, but not exacly as I want it. Please check this Plunker as it is an example of what I have.
Ok, I have two div's with height: 50%. The top div has an image (represented as a red square in the plunker) set with position: absolute.
I'm animating this image (red square) to appear from bottom to up, but the problem is:
I want the image to come from the bottom, but behing the bottom div and it is coming in front of it.
I tried z-index, didn't work, figure out why, couldn't think of another way that didn't sound like a cheap and ugly workaround.
Thanks.
Add position: relative; along with z-index to #bottom div.
#bottom {
background: #a3c6ff;
position: relative;
z-index:1;
}
Related
In one of my web pages, I have a set of buttons I'm rotating when an event happens, such that one of the buttons disappears by doing transform: rotateX(90deg); and another appears by doing transform: rotateX(0deg);. I have the buttons positioned on the right side of a div that has 100% width using absolute position, e.g. position: absolute; right: 10px;
When the buttons are not transitioning, the buttons appear correctly and appear on the right side 10 pixels from the right side of the page. However, when transitioning, the margins appear to move inwards an additional 10 pixels as if I added a margin of 10 pixels to the right.
While this isn't the most visually pleasing, here is a jsFiddle example. As is shown, the pink button is 10 pixels from the right, but the red rotated button is an additional 10 pixels to the right.
How can I avoid this?
You should add somewhere a position relative, so the absolute has a reference and not just the whole body.
.buttons {
width: 100%;
position: relative;
}
That will fix that weird behaviour
I have an extension to the wonderful jquery knob, which turns it into a degree range input. There's a transparent compass png image positioned on the knob within a div with a negative z-index, so mouse clicks will interact with the knob rather with the img.
Now, when I put the knob in a div without a background color, the compass png shows when the page loads.
However, if the containing div has a background color, the png shows only after the user starts marking the range (drag a clockwise range on the purple circle).
Here's a demonstration of the problem: http://infoxicate.me/testknob.html
Edit: The demo page doesn't demonstrate the problem anymore, since it is solved...
Do not take a negative z-index - make it positive and the div that covers it, give it a bigger z-index.
Another solution, if you worry that the pointer would affect the image and not the knob you could try pointer-events:none.
Put the following to your canvas:
canvas {
position: relative;
z-index: 2;
}
And this to the div with the image:
div{
position: absolute;
z-index: 1;
}
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.
I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.