there
Below is the html code:
<div class="cont">
<p class="fix">fixed text</p>
</div>
and css:
.cont{position:relative; width:500px; background-color:red; height:2000px;}
.fix{position:fixed; right:0;}
I want set the p.fix's right position relative to the .cont element. But the code I applied does not work correct.(it relatives to the body element)
Any suggestions?
Thank you very much.
As far as I can make out, the top, bottom, left and right attributes of a position:fixed element are relative to the browser's viewport. It wouldn't make much sense if they worked differently, because position:fixed elements are meant to be in a fixed position in the browser window, regardless of scrolling of the remaining content.
If you want to have the element in a certain position initially, you can wrap it in a div with position:absolute and layout that to be in the desired position instead, and don't aupply top, bottom, left and right attributes for the position:fixed element.
Related
I have 2 elements beside each other by floating right and left.
the right element width is dynamic by padding of children elements which increase or decrease dynamically! but the left element is a simple DIV. I want it's width to change according to the right element width. how can it be done by CSS ?
example :
<div style="float:left"></div>
<div style="float:right;padding:5px 10px;">
<a>child1</a>
<a>child2</a>
<a>child3</a>
</div>
I am not 100% sure what you are trying to achieve, but if I understand right:
you have an area A in wich you are floating the right element with the 3 children
the rest of area A you want to fill with the left element
Is this correct?
Well the easiest way would be to wrap an inline-block element around the right element, that represents the whole A area and the right element floats on the right side of this parent element. Then all properties you assign to parent are going to represent the area A that is not covered by the right element. For example background color:
<div style="display:inline-block; width:100%; background-color:blue;">
<div style="float:right; right:0; padding:5px 10px; background-color:yellow;">
<a>child1</a>
<a>child2</a>
<a>child3</a>
</div>
</div>
Here you can see the result on jsfiddle: http://jsfiddle.net/rKQXJ/
I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
I am trying to use jQuery to calculate the window height then apply that value to a DIV (the container div) finally i want the jQuery to align an element to the bottom of the page.
<div id="wrapper">
<div id="element-align">Here is the element i wish to align to the bottom</div>
</div>
Further to my question on your OP, this can be done in CSS:
#element-align {
position: fixed;
bottom: 0;
}
If needs be you can also add left/right to the element, but the fixed positioning will mean that the element will always appear in the same place relative to the browser chrome, regardless of the scroll position of the page.
Background
I have the following html code:
<div id="parent">
<div id="child">
I'm the child!
</div>
</div>
I want the parent div to be positioned relative to the bottom of the page as with the css properties position: absolute, bottom: 0px.
This works fine if the child div(s) have no padding or border. However, as showcased in this JSFiddle example, if the child has padding or a border, it expands beyond the bottom of the parent div (notice the rendered page is scrollable and there is additional content from the child div below the bottom of the page).
Question
What's the best way to make sure the parent div fully encompasses the child div vertically? (Correct me if I'm wrong, but this doesn't appear to be a problem with horizontal padding/borders)
My best idea was to add the sum of the padding/border/margin of to the padding to the parent div. Using something like SASS to generate the actual css makes this slightly more palatable, but still seems like a really unclean solution. Is there a better way?
Thanks!
(As a side note, when I made the JSFiddle example I noticed the right border was missing on the child div. Is this just a fluke with JSFiddle or something?)
If you get rid of those display: inline;s it will work like a charm.