css-position

问题 I am having a lot of issues absolutely positioning a div called id="verticalGenesis" on the following website: http://genesispetaluma.com/index.html in a mobile browser, including both Safari and Chrome on the iPhone. I ideally am trying to position a logo to appear at the right of my screen using the following css: #verticalGenesis { background-image: url("../img/Genesis%20Text.gif"); background-repeat: no-repeat; display: block; height: 570px; opacity: 0.8; position: absolute; right: 3%;

问题 I was trying to use the css position: sticky in one of my personal project when I noticed that having editable elements like input fields or text-areas inside, trigger the page to scroll to the top. I would really like to remove this behaviour if possible. .container { height: 5000px; } .heading{ background: #ccc; height: 50px; line-height: 50px; margin-top: 10px; font-size: 30px; padding-left: 10px; position: -webkit-sticky; position: sticky; top: 0px; } <h1>Lorem Ipsum</h1> <div class=

问题 I have tried many different methods mentioned here and elsewhere on the web, but none of them do what I want it to achieve. I currently have elements on a webpage positioned and styled with the code below. Then below that, I have a footer div that I want to be at the bottom of the page content (see attached images). If the content height is less than the screen height, I can either have the footer at the bottom of the screen or directly under the content (both work). If the content is larger

问题 What CSS would force a tooltip:- to be positioned just above its reference text and to take up the full width of its reference text's container ...at the same time? By default, the length between the reference text's first and last characters are considered. How to make the reference text's most left and right edges to be considered the length for the absolutely positioned child element? .tooltip { width: 100%; margin: 0 auto; /* left: 0; */ /* right: 0; */ position: absolute; top: 0;

问题 I have a an image that may change its position depending on certain actions and several divs that I want to position on the img tag. The simplified code is as follows: <div> <img src="someRandomImageUrl"> <div>foobar</div> </div> To better understand imagine I have an image with a small square somewhere around the center and I want the foobar message to be placed in the image square no matter where I position the image. Any ideas? 回答1: Somthing like this? http://jsfiddle.net/q0so8esf/ .imdesc

问题 can anyone explain how z-index default value works in this snippet ul { list-style-type: none; padding: 0; margin: 0; width: 150px; } li { position: relative; } li ul { position: absolute; background: green; left: 20%; border: 1px solid; } .foo { background: red; } <ul > <li> <a href="">main element</a> <ul class="first"> <li><a href="">First level</a> <li><a href="">First level</a> <li><a href="">First level</a> <ul class="foo"> <li class="secound"><a href="">Secound Level</a></li> <li class

问题 can anyone explain how z-index default value works in this snippet ul { list-style-type: none; padding: 0; margin: 0; width: 150px; } li { position: relative; } li ul { position: absolute; background: green; left: 20%; border: 1px solid; } .foo { background: red; } <ul > <li> <a href="">main element</a> <ul class="first"> <li><a href="">First level</a> <li><a href="">First level</a> <li><a href="">First level</a> <ul class="foo"> <li class="secound"><a href="">Secound Level</a></li> <li class

问题 I'm trying to solve an issue with css "position:fixed" property on mobile browsers. I have a fixed div: <div id="logo"> ...other content here... </div> with css: #logo{ position: fixed; -webkit-backface-visibility: hidden; bottom: 100px; right: 0px; width: 32px; height: 32px; } So, usually the behaviour is exactly the desired one, with the div position always on the bottom right of the window, indipendently of the scroll position. My issue is that on mobile browsers, when the users zoom the

问题 I am trying to make a sticky element (the one with id "sidebar") however, despite checking solutions presented here, I have not been able to make the element sticky in major browsers. body { margin: 0; } #top { position: fixed; top: 0; left: 0; background-color: white; border-bottom: solid 1px #B9D9EB; width: 100%; height: 35px; z-index: 3; } #logo a { font-family: Calibri; font-size: 1.5em; position: absolute; left: 12px; top: 0px; float: left; text-decoration: none; color: black; } #menu {

问题 I can't figure out why the margin-top of the <nav> element ( which comes after the <hgroup> element ) affects the margin-top or the placement of the <hgroup> . By adding a top margin to the <nav> element, the <hgroup> element also moves down as if it also has a top-margin applied to it heading { position: relative; display: inline-block; border: 1px solid #333; } heading hgroup { display: inline-block; font-family: "Avenir"; font-size: 5em; border: 1px solid yellow; } nav { position: relative