css-position | 易学教程

Position:fixed within position:fixed: which browser is correct?

阅读更多关于 Position:fixed within position:fixed: which browser is correct?

问题 Positioning a fixed element inside another fixed element is behaving differently in Chrome / Safari vs Firefox. This answer explains well the expected behavior for a fixed div inside a relative one, and MDN is pretty clear on this: Fixed Positioning Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page. What I don't understand is what

Center content in a absolute positioned div

阅读更多关于 Center content in a absolute positioned div

问题 I have an absolutly positioned element with content inside. It can be a <h1> or a few <p> tag. So I don't know the height of the content. How can I vertically center the content inside the absolutly positioned div ? HTML : <div id="absolute"> <div class="centerd"> <h1>helo</h1> <span>hi again</span> </div> </div> CSS : #absolute { position:absolute; top:10px; left:10px; width:50%; height:50%; background:yellow; } .centerd { display:table-cell; vertical-align:middle; } Fiddle 回答1: if you add

CSS dropdown list showing behind the dropdown below, IE6, IE7, absolute positioning bug

阅读更多关于 CSS dropdown list showing behind the dropdown below, IE6, IE7, absolute positioning bug

问题 I'm facing one of the craziest problems I've ever found in css... I have two CSS-jQuery horizontal dropdowns, one up and one below, displaying the drop-list when clicking on it. The problem comes when I click the upper dropdown in IE6 and IE7, and absolute positioned element goes over relative positioned ones. Upper dropdown list (absolute) shows behing the dropdown (relative) below. JavaScript: $("button").click(function(e){ $(".menu").hide(); $(this).siblings(".menu").show(); e

CSS - “position: fixed” acting like “absolute” in Firefox

阅读更多关于 CSS - “position: fixed” acting like “absolute” in Firefox

问题 I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute. #navigation { display: block; width: 100%; height: 50px; position: fixed; left: 0px; bottom: 0px; text-align: center; z-index: 99000; } This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at

button relative position changes after screen resize

阅读更多关于 button relative position changes after screen resize

问题 I have a button positioned in the lower right corner of a page. My problem is 1) Firefox seems to place the button in a different position than Chrome or IE9, and 2) the relative position of the button changes when I resize the screen after the initial load. I found a hack on SO that seems to help the FF problem (see code)...but I am still having the issue of the button reposition after the initial page load. In all 3 browsers, the button is placed perhaps 15 pixels higher (away from the

Centering an icon on top of an element's border

阅读更多关于 Centering an icon on top of an element's border

问题 I'm trying to overlay an icon on top of an element's border. My current solution involves absolute positioning. I can hack it to fit as close to center as possible by using something like left: 40% but as soon as I resize the window, it moves out of the center. Here's a JSFiddle showing what I've got so far. You'll see that if you resize the window, the icon moves out of center. https://jsfiddle.net/83on2jr9/ Is there an easier approach to this? 回答1: You could use margin:0 auto; with position

Strange border on fixed postition elements in firefox 7.0.1

阅读更多关于 Strange border on fixed postition elements in firefox 7.0.1

问题 There is a strange border on my fixed header and footer elements in firefox.. Does anyone know how to get rid of this or is it a bug? HTML This is the html for the home page.. <!doctype html>     <!-- Consider

Position image at bottom of variable height div

阅读更多关于 Position image at bottom of variable height div

问题 I am having some issues positioning an image within a parent div. I have 2 divs side by side both within a parent div, the first div within the container contains text and the second contains an image. The parent container has no height specified so it adjusts to the height of the content contained within it. I am struggling to absolutely position the image in the 2nd div to the bottom. Below is my HTML and css... <style> .container{ width: 100%; } .box{ float: left; width: 49%; } </style>

Get image to stay fixed even with window resize

阅读更多关于 Get image to stay fixed even with window resize

问题 I'm trying to get an image to stay fixed even after the window is resized but it drifts off to the right and you end up seeing a black space. If you start to drag the window size to the left than you can slowly see the image start to come back into view. Any ideas how to solve this problem? CSS: @charset "utf-8"; body, html{ font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; background:#000; margin:0; padding:0; color:#000; text-align:center; } .container{ text-align:left; width:1100px;

put image in an absolute position in a linear layout

阅读更多关于 put image in an absolute position in a linear layout

问题 I have an android application I created with a menu with a set of buttons that are ordered one after the other. I have a logo Icon that I want to pin to the bottom right corner of the page and to add it a margin. how can I do that ? the page itself is in a LinearLayout. but I hope it is possible to add one element with an absoute position! :) I use android 2.2 sdk thank you 回答1: Use Nested Layouts.. <RelativeLayout> <LinearLayout> Place your elements and menu here. </LinearLayout> <ImageView