I was following a tutorial https://www.youtube.com/watch?v=l6nmysZKHFU
can anyone help me with the css at the 8:10 he tell us the need to create the main tag so that the object that we create afterward don't overlap
I understand that i want to know is there any better way to do that .Can we do some tweak in the toolbar css to make it fixed so that other element will not overlap in the toolbar
Instead of fixed position, you can use position: sticky; with top: 0;. Then you won't have to add any other element to avoid the overlap.
Position Sticky
This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed.
Related
I am trying to position an element on my page but would like it to be positioned both relatively and absolutely (stay with me, I know that doesn't make sense).
What I really want is a way of positioning this element that takes a hybrid of functionality from both the relative and absolute positioning.
So in my case I want this element to be positioned say 10px higher than its initial position, for this relative works fine, but we get a nasty white space where it should have been. So as-well as moving it up 10px relatively I would also like it to come off the page like an element that has been absolutely positioned.
Now before you say "just use absolute and position it there" I have quite a large page and by positioning something like this I would use huge number that would be thrown way out if the screen size changes.
So, to summarize I want to place this relative to its original position but also pull it off the page like absolute positioning, is this possible?
Perhaps this'll help?
#myElem {
position: relative;
top: -10px;
margin-bottom: -10px;
}
This'll move the element 10px up, and also move its lower border 10px up, eliminating the space below it.
does anybody know a way of positioning an element to be always in the same position, but having different parents that are in another.
Ok to make is clearer here is an example. You have horizontal dropdown navigation, when u hover over one navi element, u see subnavi just under the element you hover over, how can I make it to appear on, for instance, top left corner of the screen, always. Next button will be next to the first one, for about 100px right, and now when u set pos absolute or relative, the subnavi wont be exacty in the same position as the first one, but 100px to the right. And also, I can't use special class or ids, only global classes.
Without your code its hard to answer your question, I however give it a try:
You can make it by applying position: absolute; left: 0px (change left to your wishes, and add a top: 0px if you want to adjust the stating height), to your submenu, check this demo.
Note that the submenu only appears when you hover the parent. On blur, it disappears. When you want it to stay, you'll need some javascript (or jQuery).
position the parent DIV "relative" than you position the child div "absolute".
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I want to have a region of my page that is reserved for context sensitive help text. It is blank, except when hovering over certain particular elements. But, of course, there are several independent pieces of text from which the visible selection might be chosen. This is in a page flow, with more stuff below it. I tried using a div "positioned", and putting help divs inside that. Each of the help divs is position: absolute; top: 0px; visibility: hidden; with the intention that JS would make one of them visible at a time, yet the space would have been reserved for the biggest piece of text in any of the help divs. Well, as most of you have guessed, because the help divs are position: absolute, their heights don't affect the height of the enclosing div, which ends up at a height of zero.
how can I achieve this? I don't want to use pixel sizing to force a height, because it's almost always wrong on some browser/font combination, and would be a bear to keep tweaking every time the help text were changed, or a new, longer help segment gets added to this.
Did I make sense, or do I need to try to draw pictures?
Yep, you're making sense. As you indicate correctly the containing element is collapsing to zero height since it doesn't contain any flow children with size. There is no simple solution to this without resorting to Javascript as obvious alternatives mean making all of them part of the flow layout, meaning the container would grow to accomodate all of the texts.
Solutions that would work:
Apply display:inline-block to all of the help texts to put them next to eachother, put them in a container element that has a width of 10000px or more as required, and encapsulate that element in a container with overflow:hidden. This way the container will actually assume the height of the largest child. Activating a text would then require moving the element in the DOM to the front so it is drawn first, or scrolling to bring it to the right position, which could be complex.
After loading the page use Javascript to measure the actual heights of the elements, set the largest one as the height of the container, and then apply display:none to the children instead of visibility:hidden.
The second option is easiest, and would be my preferred choice. It all depends a bit on your specific case though whether there's a better alternative.
I want to put a banner across the top of a webpage. The first way I tried I couldn't get the two divs to position each other properly. They weren't offsetting from the middle (using the same technique that a single, static div would) and one was below the other.
Here's the code
http://jsfiddle.net/AndyMP/wFutk
I then managed to do it a different, easier way
http://jsfiddle.net/AndyMP/TJjwp/1/
But of course it is bugging me that I couldn't get the first method to work. Any guidance would be appreciated, in particular how to offset correctly from the middle of the container div.
(**Edit: I should add that I did this in IE9 and you might need to adjust the size of the preview pane in jsfiddle to see it all)
One was below the other because you were using position: relative (Specification). In that mode, the divs are first layed out using normal flow and then offset. So top: 2px was offsetting each one 2 pixels below where it would normally be.
Use position: absolute on the two inner divs instead.
Using the float property seems to be a really good idea here
http://jsfiddle.net/wFutk/1/
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.