css-position

问题 I am trying to set a fixed div div(menu) directly under another fixed div (header) and the positioning should also work with different screen sizes. I call the "menu" div through JQuery with toggle and it appears under the "header" div. I can do this setting a fixed top value greater than the height of the "header" div but if I do not want the header to have a fixed PX value how do I do this? Any suggestions? html: <div id="header"> <div id="menu"> </div> </div> css: #header{ position:fixed

问题 I have been the following code that is not properly positioning itself when reviewed on Firefox against IE 11: <div style="position: absolute;"> <div style="position: relative; top: 5px; left: 30px;">Union Affiliation:</div> <div style="position: relative; top: 50px; left: 30px;">Biography:</div> <div style="position: relative; top: 150px; left: 30px;">Past Works:</div> <div style="position: relative; top: 209px; left: 30px;">Primary Work Area:</div> <div style="position: relative; top: 225px

问题 I have been the following code that is not properly positioning itself when reviewed on Firefox against IE 11: <div style="position: absolute;"> <div style="position: relative; top: 5px; left: 30px;">Union Affiliation:</div> <div style="position: relative; top: 50px; left: 30px;">Biography:</div> <div style="position: relative; top: 150px; left: 30px;">Past Works:</div> <div style="position: relative; top: 209px; left: 30px;">Primary Work Area:</div> <div style="position: relative; top: 225px

问题 I am building a responsive website using a modified 960 grid: @media only screen and (min-width: 720px) and (max-width: 959px){ .container_12{ margin-left: auto; margin-right: auto; width: 720px; } } and a navigation bar that uses position:fixed to lock itself to the top of the page. .nav-band{ width: 100%; font-weight: bold; position: fixed; z-index: 3; overflow: hidden; background-image:url('../img/trans_black.png'); padding: 2px; } This works fine in most cases, but it breaks on my android

问题 I'm getting some strange hover behaviour from IE9 which seems to be resulting from positioning an element relative to a parent. It's a bit difficult to explain so I've made a working example available here: http://jsfiddle.net/CVPhW/2/ I've stripped it out as much as I can but I left all the containing div s in there in case they were somehow relevant. Try hovering your cursor over the very bottom of each button and you'll see the hover doesn't activate unless you move the cursor around 10

问题 <div id="1"> <div id="2"> </div> </div> I cant position div2 above div1 (not in the z-index but in vertical dimension). Negative position: top not working, seems like top border of parent div is limit for childrens. |-------| | div2 | ------| | | |_______| | | | div1 | |__________| 回答1: Class names starting with digits are not valid, although it may work in some browsers. Use div1 or div2 and that should work. Take a look at this answer for a good explanation of valid CSS class names. Update

问题 This question already has answers here : css position fixed not working at all (5 answers) Closed last year . I'm trying to expand a menu when someone clicks on the menu icon but right now when I do that its pushing over the page title -- JSFiddle. I would like the page title to stay in the same place during the menu opening/closing interaction. The HTML5 I'm using to construct the page title and the menu are #pageTitle { display: flex; padding: 10px; position: fixed; } ul.horizontal { list

问题 I can't get max-width to work when using absolute positioning. In https://jsfiddle.net/jn2bs6ax/ the item should take as little width as possible, up to the max-width of 1000px. But it's taking a width of about 50% and wrapping the text. How to make it work? If I set the max-width to something small like 300px it works, but anything larger than what it's width currently is doesn't cause it to expand. This example just shows an item that's been absolutely positioned to the center below an item

问题 I have this typical layout and I need to scale only the content section but move the division which is right/next to it accordingly. i.e, when the content section is scaled out, it exceeds its space and moves of the out viewport width and height. In the case of exceeding viewport width, I need to move the right yellow span/bar as it's position is also changing as per its sibling's width. Please note that I am using display: grid so I position the elements as per the columns but not give a

问题 I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions. I'm using a wrap division where my banner/header, text container and my footer are relative positioned. I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container. Like this the website would occupy at least all the windows in it's height. My HTML code (a part ^^) <div id="wrap"> <div id=