css-position

How to make div's percentage width relative to parent div and not viewport

由 时间秒杀一切 提交于 2019-11-26 09:29:45
问题 Here is the HTML I am working with. <div id=\"outer\" style=\"min-width: 2000px; min-height: 1000px; background: #3e3e3e;\"> <div id=\"inner\" style=\"left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;\"> <div style=\"background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;\"></div> </div> </div> What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space

Absolute position is not working

由 给你一囗甜甜゛ 提交于 2019-11-26 09:10:54
问题 I\'m trying to place a div with id \'absPos\' in absolute position in relation to its parent div. But it is not working, the div is placed at the top left corner of the page. My code sample is as follows <html> <body> <div style=\"padding-left: 50px;\"> <div style=\"height: 100px\"> Some contents <div> <div style=\"height: 80px; padding-left: 20px;\"> <div id=\"absPos\" style=\"padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;\"></div> Some text </div> </div> <

CSS-Filter on parent breaks child positioning

由 给你一囗甜甜゛ 提交于 2019-11-26 08:59:45
I am currently working on a website and encountered this weird behaviour. I am not sure if it is a bug or how to deal with it so I'm asking you guys for help. So I have this title-screen "animation" that has the title centered in a fullscreen page and when you scroll down it becomes smaller and remains at the top of the page. Here is a working example with the expected behaviour, from which I stripped all unnecessary code to make it minimal: $(window).scroll( () => { "use strict"; let windowH = $(window).height(); let windowS = $(window).scrollTop(); let header = $("#header").height(); if

Why is an element with position: fixed moving with a non-positioned sibling?

由 こ雲淡風輕ζ 提交于 2019-11-26 08:29:27
问题 There are a lot of questions on S.O. that cover the answer to how to fix this (add top: 0 ), but none of them attempt to actually explain the reasoning behind the header movement. I\'m more curious as to why this is the case. <header>Project Header</header> <main class=\"container\" id=\"layout-mainContent\"> <div class=\"row\" id=\"first-row\">somecontent</div> </main> header { position: fixed; } #layout-maincontent { margin-top: 90px; //moves header down. } List of like-questions but with

position: absolute without setting top/left/bottom/right?

由 ╄→гoц情女王★ 提交于 2019-11-26 08:25:36
问题 Case #1: I want to put a logo above the photo in the header in the default WordPress theme ( http://twentyelevendemo.wordpress.com/ ) My solution: add the logo before the photo, and set position: absolute on it, without setting any of the top/left/bottom/right properties: http://jsfiddle.net/TsAJp/ Html: <a id=\"header\"> <img id=\"logo\"> <img id=\"photo\"> </a> Css: #logo { position: absolute; margin: 10px; /* or padding: 10px; */ /* or border: 10px solid transparent; only this works with

Set Google Maps Container DIV width and height 100%

由 痞子三分冷 提交于 2019-11-26 08:03:56
问题 I loaded Google Maps API v3 and print Google Map in div . But when set width & height to 100% and auto I can\'t see the Map. Here is HTML code snippet. <!-- Maps Container --> <div id=\"map_canvas\" style=\"height:100%;width:100px;margin:0 auto;\"></div> Is there a way to fix this issue? 回答1: You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least. body, html

Mobile Safari bug on fixed positioned button after scrollTop programmatically changed…?

由 余生长醉 提交于 2019-11-26 08:00:12
问题 I\'m just about done a webpage but there is one bug in Mobile Safari (iPhone and iPad iOS 5.0.1) with two buttons that are fixed to the upper and lower right corners.. The buttons are not faded in until after clicking submit on a textbox which opens up to the rest of the page... After the rest of the page is loaded and the buttons are faded in you can click on either of them and they both work... However, clicking them causes a programmatic scroll and after that scroll is complete you can no

What are the default top, left, botton or right values when position:absolute is used?

由 谁说我不能喝 提交于 2019-11-26 07:46:44
问题 In a big project, few buttons were misalligned in IE. I found a fix by coincidence, by setting position: absolute without any parameters. It made me wonder, what are the default values of such position? I understand how absolute positioning works and what containing element means. But I don\'t know where the default values come from. They are definitely not top:0; left:0 which I originally expected. <!DOCTYPE html> <html> <head> <style> h1 { position:absolute; } </style> </head> <body> <h1

Why does `overflow:hidden` prevent `position:sticky` from working?

由 那年仲夏 提交于 2019-11-26 06:42:54
问题 In the following snippet, there is a sticky div positioned inside a container. It sticks to the top of the scrolling panel while staying inside its container all the time. This is the same behavior as that of the UITableView headers on iOS, where the headers stay visible until the next header is at the top. In the second snippet, everything is the same except that the container has an overflow:hidden CSS rule. This seems to prevent the position:sticky behavior from working correctly. .parent

Why does position:relative; appear to change the z-index?

由 青春壹個敷衍的年華 提交于 2019-11-26 06:09:07
问题 So I have this markup and inside it there is <div class=\"mask\"></div> which sets the blue overlay ontop of the image. If I don\'t make the .container position:relative , the title text gets hidden behind the blue layer... Almost as if it\'s usage is mimicking z-index Why is this the case? Pen: https://codepen.io/anon/pen/OBbbZB body { margin: 0; font-family: arial; } section { position: relative; background: url(https://preview.webpixels.io/boomerang-v3.6.1/assets/images/backgrounds/slider
订阅 css-position