css-position

Fixed headers with text fields on mobile safari websites

由 久未见 提交于 2019-12-09 11:49:46
问题 I've been looking around for awhile, and I can't seem to find any fix for this issue. When an input field gains focus in mobile safari (haven't checked other browsers) a fixed element will jump due to safari putting that element in view (closer to the center). The error only occurs when a user has scrolled, if the user is still at the top of the page nothing occurs. Before & After screenshots Does anyone have a clue how to fix this? The only solution I have come across is to scroll back to

Why does absolute positionining within <button> works differently from <div>

由 倖福魔咒の 提交于 2019-12-09 10:55:22
问题 I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <style type='text/css'> </style> </head> <body> <button style='height:100px;width:100px;position:relative;'> <span style='position:absolute;top:0;left:0;'>text</span> </button> </body> </html> <span> is placed relative to the

position:fixed and width:inherit with percentage parent

由 自闭症网瘾萝莉.ら 提交于 2019-12-09 09:25:25
问题 I'm trying to give a fixed element a width of a percentage parent (here #container ). When I use pixel instead of the percentage then it works. How can I do it? Is this possible with CSS ? HTML <div id="outer"> <div id="container"> <div id="fixed"> Sitename </div> </div> </div> CSS #outer{ width:300px; border: 1px solid yellow; } #container { width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/ border: 1px solid red; height: 300px; } #fixed { position: fixed; width:

CSS: have a div after an absolute positioned div

由 ￣綄美尐妖づ 提交于 2019-12-09 09:13:58
问题 I was wondering how to do this, my current mark up is as follows: <div id="playArea" style="position: relative;"> <div id="widget1" class="widget" style="position: absolute; left: 295px; top: -1px; width: 313px; height: 269px;">Hello</div> <div id="widget2" class="widget" style="position: absolute; left: 63px; top: 35px; width: 80px; height: 42px;">World</div> <div style="position: absolute; left: 534px; top: 329px; width: 183px; height: 251px;">Bye</div> </div> Now, if I create a paragraph

Fix div to bottom without using css position

由 你。 提交于 2019-12-09 06:27:27
问题 I am having issues with position: fixed; on IOS8 Safari. I've determined it's related to the footer div which I am positioning at the bottom of the page. I've also tried position: absolute; but that didn't work either. Does anyone know of a way to position this without using CSS position? Here is the code I'm using: .foot-nav{ position: fixed; bottom: 0; width: 100%; } 回答1: iOS has issues with fixed positioning. When swiping to scroll, it will not update the fixed position until the tap/drag

sticky position on css grid items

由 我只是一个虾纸丫 提交于 2019-12-09 02:32:05
问题 I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it. main { display: grid; grid-template-columns: 20% 55% 25%; grid-template-rows: 55px 1fr; } nav { background: blue; grid-row: 1; grid-column: 1 / 4; } section { background: grey; grid-column: 1 / 2; grid-row: 2; position: sticky; top: 0; left: 0; } article {

Absolute positioning within inline elements. Is this behaviour correct?

由 大兔子大兔子 提交于 2019-12-08 19:23:34
问题 Consider the following simple HTML and CSS a.rel{ position:relative; } button{ position:absolute; top:0; left:0; } Lorem ipsum dolor sit amet <a class="rel" href="https://www.google.co.uk"> <img src= "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> <button>I'm a button</button> </a> Now consider CSS2 10.1.4.1 If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or

Why does changing the positioning of a table-row element from 'static' to 'absolute' back to 'static' result in a permanent height change?

由 依然范特西╮ 提交于 2019-12-08 15:54:08
问题 A display: table-row div with height: 75px is nested inside a display: table div with height: 100px The height of the child is 100px initially with position: static By changing the positioning of the child element to absolute and then back to static , the height of the child permanently changes from 100px to 75px . It only occurs if the parent element is a table and the child is a table-row and apparently it's only in WebKit; firefox/IE change back to 100px height but Chrome/Safari don't.

Fixed Position in responsive design

由 ℡╲_俬逩灬. 提交于 2019-12-08 14:09:21
问题 I am using responsive framework 1140px. In the mobile version I have to fix the position of a logo but not have it overlap the content on scroll. Basically fix the position but don't fix the image on scroll, can this be achieved? 回答1: It appears that you want is position: absolute , the difference being that absolute images do not move while scrolling. http://www.impressivewebs.com/absolute-position-css/ It's worth taking a look at this link in order to see the differences between relative,

Fixed header whilst scrolling

由 放肆的年华 提交于 2019-12-08 13:57:29
问题 I am using a jquery scripts to cause my header to remain fixed to the top whilst scrolling. But at the moment, it's animated and that's quite a distraction. Is there a way I can modify the script so that it doesn't animate? JQuery; <script type="text/javascript"> $().ready(function() { var $scrollingDiv = $("#header"); $(window).scroll(function(){ $scrollingDiv.stop().animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "fixed" ); }); }); </script> Html; <div id="header">Content</div>
订阅 css-position