I'm really not sure how to word this question, but here goes... I have a navigation bar at the top of my web page with a position of "fixed" so that it stays at the top even if I scroll down. However, I have a box that will hold all of my text/blogs that overlaps with this navigation bar whenever I scroll down.
Is there a way to "delete" a few pixels of the box (the one that holds all of my stuff) so that the navigation bar never overlaps with it? I'm sorry if this is confusing, but like I said, I'm not sure how to word it.
Screenshots:
When I'm not scrolled down-
When I am (overlapping)-
So I want to get rid of the overlapped area of my content container (and maybe 5px below it).
The other answers are spot on. I'd check the margins, and the overflow setting.
If the div's have absolute, relative, or fixed positioning, you can also play around with the z-index.
The higher the value of the z-index, the higher up in the stack an element is. So an element with a z-index of 2 will be displayed in front of an element with a z-index of 1.
On the box that contains your main content, add a margin-top equal to the height of the navigation bar. For example, if this is your html:
<div id="navbar">...</div>
<div id="content">...</div>
Then your css would be something like this:
#navbar {
position: fixed;
top: 0;
left: 0;
height: 50px;
}
#content {
margin-top: 50px;
}
Ok, thanks for the screen shots.
#navbar_id {
position: absolute;
top: 0;
left: 0;
height: 50px;
z-index: 25;
}
#main_stuff_id {
z-index: 24;
/*other
style
rules*/
}
keep in mind the "css box model" too: http://www.w3schools.com/css/box-model.gif
It sounds like you want to enforce a margin on an element with position: fixed; set. I don't think this will work, but you could put a fixed-position container around the element which you want to actually be fixed. This container can have padding, which will then give the desired effect.
<div style="position:fixed;padding:16px;background-color:#fff;width:100%;box-sizing:border-box">
<!-- don't fix the inner element -->
<div style="background-color:red">The content you want to be fixed.</div>
</div>
Working Fiddle: http://jsfiddle.net/qtHtY/
Or if you are using position you can then use top: #px; and left: #px
Related
I have this UI element that opens a tooltip/popover thing when clicked. I would like the tooltip window to appear right below the UI element, but on mobile it should be aligned to the left and right side of the viewport instead of being centered under the "more…" button.
In other words, I would like to have:
.tooltip {
top: 100%; // appear right below the button
left: 10px; // 10px *from the edge of the window*
}
Is there a way to mix referentials like this? Have the top position be calculated based on a parent, while left and right are calculated based on the viewport?
(by the way I know I can do this with JavaScript but I wanted to look for a pure CSS solution first)
The best solution I have so far is to make sure that the parent that has position: relative and acts at the referential for the absolutely positioned tooltip spans the whole width of the viewport. This works but it means the tooltip can't just be a drop-in component that can be added anywhere in your app, which is what I was trying to achieve.
It’s possible with an extra parent element around the tooltip to position it vertically.
Working demo: https://codepen.io/paweldecowski/pen/vYXaXvN
<span>Anchor
<div class="tooltip-parent">
<div class="tooltip">Tooltip</div>
</div>
</span>
.tooltip-parent {
position: absolute;
left: 0;
right: 0;
}
.tooltip {
left: 10px;
position: relative;
}
Edit:
Actually, this will work without the parent element, too. Just position the tooltip absolutely:
.tooltip {
left: 10px;
position: absolute;
}
The tooltip will by default stick to the bottom of the anchor. Of course, you won’t be able to use top or bottom properties because they will be relative to the viewport, but you can adjust the vertical position with margin.
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
i want my div of menu to appear on the top left of the div for my header image. The backgrounds used for the menu blocks are transparent and translucent and i want that the image of the header should be visible under through translucent and transparent backgrounds.. How can i do it using css??
the class for div of menu is divmenu and for header is divmainimg
div.divmainimg {
position: relative;
}
div.divmenu {
position: absolute;
top: 0;
left: 0;
}
Consider changing the class names to mainimg and menu, respectively.
Set position: relative; on the parent object of your menus that you want them to be positioned relative to, and set position: absolute; on the menu divs. Often you can get away without specifying the exact position - if the divs appear in the DOM where you want them to be visually. E.g. this could be enough:
body {
position: relative;
}
div.menu {
position: absolute;
}
Edit: Forget about z-index for now - it is rarely needed.
HTH
try to use absolute position, and set a high z-index for the div you want over others..
You could also now Just simply put the div you want to be over the other div inside the div you want to be under for example:
pretend your div class="a" is the one you want on top, Then div class="b" you want on bottom.
that would put A on top then B under it.
I believe what you are wanting is z-index. Rather than explaining it here, just do a Google search for it. It is simple to understand.
Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.
What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.
However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.
Here's what it should look like http://www.binarymark.com/layexp.png
Can you help me please?
Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.
Thanks.
position: fixed;
right: 0;
top: 50%;
Edit: try inserting this div as the first child of your <div id="content">...
<div class="right-tab">TEXT</div>
CSS:
.right-tab {
position: fixed;
top: 50%;
width: 1100px;
background-color: red;
text-align: right;
}
That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.
I want to float a div to the right at the top of my page. It contains a 50px square image, but currently it impacts on the layout of the top 50px on the page.
Currently its:
<div style="float: right;">
...
</div>
I tried z-index as I thought that would be the answer, but I couldn't get it going.
I know it's something simple I'm missing, but I just can't seem to nail it.
What do you mean by impacts? Content will flow around a float. That's how they work.
If you want it to appear above your design, try setting:
z-index: 10;
position: absolute;
right: 0;
top: 0;
If you don't want the image to affect the layout at all (and float on top of other content) you can apply the following CSS to the image:
position:absolute;
right:0;
top:0;
If you want it to float at the right of a particular parent section, you can add position: relative to that section.
Try setting its position to absolute. That takes it out of the flow of the document.