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
Related
On the mobile site of https://lostboysfoundgirls.com/studio/ there is an image acting as a border around the site and the buttons on the lower z-index become unclickable under this top border image. Obviously I want the buttons to scroll under the border image visually, but in doing this with z-index (buttons lower, border higher) the link click isn't initiated due to the z-index positioning.
Another example of a similar issue is on http://lowlifeclothing.co/ with multiple images displayed on the home page. They are all clickable images with links attached. All of the images on the home page are on the same z-index, but some of the images overlap each other and make other images unclickable.
How do I make all the links in my images work with this overlap occurring? Can I make it so clickable links always take priority despite image overlap or a border image with a higher z-index or two images with links overlapping?
you can add the following css to the buttons
.elementor-button-link {
position: absolute;
width: 200px !important;
z-index: 999;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
}
The only disadvantage of this solution is that you have to set a fixed width for the buttons otherwise it will be 100% to its parent.
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;
}
Positioning responsively is the most confusing thing to me. Ill give a simple example to help portray what i can't figure out. I have a div. I make the width and height a percentage and position it on the page absolute, top 25% and left 5%. All of this looks fine but when i resize the page it moves to 25% and 5% of that smeller screen resolution, and i can't get it to just stay there. I have a min-width and height so that the actual div won't resize, just where it is positioned on the page. How do i position something on a web page so that it is responsive, yet will no move all over the place when i resize the browser window. Sorry if I'm not really good at explaining this, i just never really understood how to position correctly.
Example :
#example_div {
width: 10%;
height: 10%;
min-width: 100px;
min-height: 100px;
position: absolute;
top: 25%;
left: 5%;
}
percentage values are always relative to the parent element (i.e. the on around the current element, which can also be the body or window).
pixel values are absolute. You can combine pixel and percentage values. If you want your DIV to shrink when you resize the window, but stay at the same position, use percentage values for width and height, and pixel values for top or bottom and left or right.
I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.
I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.
Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.
Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.
In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).
As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.
Any help is greatly appreciated! Thanks in advance.
======================================
(source: renboy.com)
Unfortunately I'm a new user and the interface won't allow me to post a photo.
The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).
However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.
==================
Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!
http://jsfiddle.net/f7RMA/
<div class="box">
<img src="http://renboy.com/images/squareWeb.jpg">
<div class="bar"></div>
</div>
CSS:
.box {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
.box img {
display: block;
width: 100%;
}
.box .bar {
position: absolute;
width: 100%;
height: 10%;
top: 85%;
}
WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.
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.