Description
I'm trying to make a div look like it's growing from where it is. To do this I'm changing the position from relative to fixed which makes the first transition start from top:0, left:0 instead of the element's current top/left. How can I fix this to use the elements current offsets?
JS Fiddle
http://jsfiddle.net/ZjWkD/
Note: After the first click, the code works exactly how I want it to. The very first click is the problem.
Hello and thanks for the fiddle,
It looks like when you first set the css here, you had transitions on your target-div which was messing things up a bit, in addition to setting your initial position inside the click function.
$(this).css({
position:'fixed',
top:$(this).offset().top,
left:$(this).offset().left
});
Setting the position of the target-div before the click function fires will position the div correctly, and applying the css without the animations on it will ensure that the target-div is in the right spot when the document loads (if you keep the animations on that target-div, even if you apply the starting css in $(document).ready it will load the page and run the animation rather than having the div start there).
I used a separate class for the animation and applied it only after the initial positioning was set (see .test class in fiddle below).
http://jsfiddle.net/Jag96/wdh4N/
Related
I'm trying to use a Bootstrap 3 popover as a relatively positioned element that is inserted in normal document flow, so it pushes down the subsequent DOM elements. That is, I have a big image at the top, followed by a form. When the image is clicked, I want a popover to appear below the image, pushing down the form.
I understand that popovers generally have an absolute position as in the normal use case this makes sense. However, in my particular case, I'd like it to be relatively positioned, but still appear below the element it belongs to. Is there a (non-hacky) way to accomplish this?
You can use simple CSS to override Bootstrap's position:absolute..
.popover {
position:relative;
}
Demo: http://www.bootply.com/129257
Do you have to use the popover for this? Seems like you would be better served by the collapse component: http://getbootstrap.com/javascript/#collapse
And if you don't absolutely HAVE to use Bootsrap for this, jQuery's slideToggle function would accomplish what you're looking for, too: https://api.jquery.com/slideToggle/
I am making a webpage with an image at center and i wanted a password field(textbox on the image) like this.
I used Some CSS3 animations in the image so is there's any way that i could place my text box on the image without affecting any css animation??
As he said in the comment sample code would be nice, however you could try using absolute position in your css for the image this will allow overlapping, I cannot give any specific code but it will be similar to what is below.
{
position:absolute;
}
in the above case use :
position:absolute
what it does is simply disassociates the elements from is siblings and can be placed anywhere holding a reference to its parents.
Means if you want to position the element , use left/right of its parent.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Edit to reopen:
It seems to be difficult to position elements over a google map. Using z-index does not solve the problem which is described below: Google Maps will stay on top of some other elements even when using high z-indexes.
The question is:
Is it possible to have a div cover parts of a google map?
I have the following popup:
But when i move this popup up to appear over the map, it gets hidden:
How to force something to be the top most, always displayed object on screen?
I have tried setting the z-index on my CSS property sheet, but this did not work.
Is there some HTML/CSS property i can set so that the popup, which is a DIV, actually always sets on top of everything else?
z-index is not that simple friend. It doesn't actually matter if you put z-index:999999999999..... But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well.
I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the element to be on top. That way we can be sure that the z-index of this item has been given last and the index will be noted. This one requires some action to be handled though, but in your case it seems to be possible.
Not sure if this works, but you could try giving the !important parameter too:
#desired_element { z-index: 99 !important; }
Edit: Adding a quote from the link for quick clarification:
First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.
Adding the z-index for the element via jQuery, gives the element different stacking context, and thus it tends to work. I do not recommend this, but try to keep the html and css in a such order that all elements are predictable.
The provided link is a must read. Stacking order etc. of html elements was something I was not aware as a newbie coder and that article cleared it for me pretty good.
Reference philipwalton.com
Try setting position to absolute, ie.
#yourDiv{
position: absolute;
z-index: 10;
};
Are you using position: relative?
Try to set position: relative and then z-index because you want this div has a z-index in relation with other div.
By the way, your browser is important to check if it working or not. Neither IE or Firefox is a good one.
you should use position:fixed to make z-index values to apply to your div
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too.
CSS:
#someDiv {
z-index:9;
}
Read more here: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
One form to do this is insert the panel that you want to expand inside a DIV setted as relative: let me show you:
<div style="position:relative">
<div style="position:absolute; z-index: 1000;">
your code
</div>
</div>
You use the first div to position the inner content in a specific area inside your page and the second absolute should be referred to the container (because is relative) The z-index in this case is referred also to container and if it higher that the container should be at top. You can put the style in a CSS class and change the size of the absolute div to expand it on hover or another action that you want to control.
I hope that this help
dropdowns always show up on top, only solution for this problem is to hide dropdowns when image is displayed (display:block or visibility:visibile) and show them when image hidden (display:none or visibility:hidden)
I tried searching for this on Google, but to no avail.
Can someone point me to a good resource that explains the rendering and visibility rules for CSS ? Or if it is very simple, can someone please write it down here ?
To give you an example, let's say that I have 2 large divs, DIV_LARGE1, DIV_LARGE2, that are not contained within each other and a small div, DIV_SMALL. When DIV_SMALL is defined within DIV_LARGE1, I can see that part of it which falls inside DIV_LARGE1, but the area that is shared with DIV_LARGE2 gets hidden beneath DIV_LARGE2. I am displaying DIV_SMALL (by setting its display:inline) after the page has rendered (on some click), so it should not matter that DIV_LARGE2 comes after DIV_LARGE1 in the HTML code.
What takes precedence over what ? Since my smaller div has position:relative and both the other divs (DIV_LARGE*) have position:absolute, I can infer that absolute positioning takes precedence over relative if the div is not defined inside it. But is this correct ? What are the precise rules ?
Phelios is correct, the issue you're running into is related to the z-index property.
Here's a great article from SmashingMag that explains it in detail: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
For the tl;dr - positioned elements get stacked in the order they're placed in the html code, so your div_small inside the first large div is by default always going to be stacked "under" the second large div. You can fix this by setting the small div's z-index property in css.
I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.
I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.
So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)
You can see and play with it here.
You need to set the tool tip to not even be shown normally.
#one a.tooltip span {
//display:block;
display:none;
....
}
Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.
Your span is still in the document flow.
You can remove it by setting its display to none, as the comment above suggests, or setting its position to absolute, which seems to be what you were getting at to hide it off the left edge of the screen.