css-position

Element not moving from top

谁说胖子不能爱 提交于 2019-11-29 18:38:26
within a parent element position relative, i include position absolute in an p element but the "p" element not moving when i include “top” position..look at the code below.. <div class="btnClass"> <p>ghghg</p> </div> and the css - .btnClass{ position: relative; } p{ position: absolute; top: 20%;/*this is not working*/ left: 15%; border: 1px solid red; display: block; } The parent btnClass need a height Note, a div 's width defaults to browser viewport, its height by its content or explicit set, hence the left: 15% work but the top: 20% not .btnClass { position: relative; height: 200px; } p {

Set width of fixed positioned div relative to his parent having max-width

馋奶兔 提交于 2019-11-29 17:38:22
问题 Is there any solution without JS? html <div class="wrapper"> <div class="fix"></div> </div> css .wrapper { max-width: 500px; border: 1px solid red; height: 5500px; position: relative; } .fix { width: inherit; height: 20px; position:fixed; background: black; } I cant add any other styles for .wrapper except width: 100%; . I try with width: inherit but it doesn't work for me because of I have parent div with only max-width. source Here is JsFiddle Demo 回答1: A position:fixed element is not

Block Formatting Contexts, Collapsing Margins and Floating Containers

梦想的初衷 提交于 2019-11-29 17:36:28
In order to understand what does a block formatting context do, I'm trying to find out what's going on when a BFC is not created. I took the following demo from Everything you Know about Clearfix is Wrong : .wrapper { width: 740px; background: #cccccc; } .leftSidebar { float: left; width: 200px; } .rightSidebar { float: right; width: 200px; } .mainContent { padding-right: 200px; padding-left: 200px; } .floatMe { float: left; background: teal; color: #fff; } <div class="wrapper"> <div class="leftSidebar"> <h2>Heading</h2> <pre>.leftSidebar { float:left; width:200px; }</pre> </div> <div class=

fixed positioned element flicker in IE only, how to solve?

本小妞迷上赌 提交于 2019-11-29 17:35:49
问题 Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure. website: http://gerbrandy.zitemedia.nl:88/ I use a script to resize the background proportional but this is not the problem because the resize event does not fire when scrolling, so it is not a problem of the script. It has something to do with a fixed positioned element. This script works okay for several years in all other browsers. I have no idea

Positioning context on table-cell element in Firefox

走远了吗. 提交于 2019-11-29 16:56:17
Usually, we can set a parent element to be the context for a child's absolute positioning, as follows: #parent { position: relative; } #child { position: absolute; top: 0; left: 0; } This all works fine, but when the parent has its display property set to table-cell , it doesn't work in Firefox. The positioning context for the child element will be the closest positioned ancestor above its parent. Of note, this works everywhere else. Tested in IE8, IE9, Safari, Chrome & Opera. See the fiddle here: http://jsfiddle.net/RZ5Vx/ Also, see this fiddle with the parent's display set to inline-block ,

How to position child div to the center of every parents div using position absolute in css [duplicate]

偶尔善良 提交于 2019-11-29 16:50:55
This question already has an answer here: How to center absolutely positioned element in div? 32 answers I'm having difficulty on positioning child div's on every parents div. Here's the css code: .mainDiv { height:500px; position: relative; } .mainDiv .parent1 { height: 250px; background-color: blue; top: 50px; position: relative; } .mainDiv .parent2 { height: 250px; background-color: yellow; position: relative; } .mainDiv .parent1 .sub1 { width: 100px; height: 100px; background-color: green; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 50%; } .mainDiv

CSS positioning to fill container: width vs. left/right?

孤者浪人 提交于 2019-11-29 16:41:20
问题 Considering: For elements that are absolutely positioned inside a relatively positioned container. If you want the element to fill the width of the container. The element is also bottom-aligned. Is it best for maximum browser compatibility to set a width in pixels for the element, or simply use left and right? Any common bugs to watch out for with either method? Clearly, using left: 0; and right: 0; would make the code more manageable in cases where the image's width or padding were to change

How to enable user-scalable (viewport property) after disabling it?

江枫思渺然 提交于 2019-11-29 15:24:48
I created an Android app with Phonegap. I want to be able to have a fixed div in one page and to zoom-in in another page. I use jquery mobile 1.2.0, Jquery 1.8.2, Phonegap 2.0.0 and Android 2.2. My code is: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Phonegap Application</title> <link rel="stylesheet" href="./lib/jquery.mobile-1.2.0.css" /> <script src="./lib/jquery-1.8.2.js"></script> <script src="./lib/jquery.mobile-1.2.0.js"></script> <script src="./lib/cordova-2.0.0.js" type="text/javascript"></script> <meta id="viewport" name="viewport" content="initial-scale=1.0,

How can I properly reflect different levels of headers with position:sticky?

笑着哭i 提交于 2019-11-29 12:55:11
I'd like an elegant way to "collect" multi-level headers at the top of the window as the user scrolls, and position:sticky gets me 90% of the way there. The snippet below works just as I'd like it to with one exception: when Header 2b reaches the top, Header 3b is still visible. Since Header 3b is meant to be a "child" of Header 2a, I'd like it to either scroll away or somehow be hidden once Header 2b reaches the top. (Predictably, Header 1b and Header 2d both have the same issue.) I know that what I have here is how the CSS is supposed to work, but is there an elegant way to make it work the

center fullscreen background video

自古美人都是妖i 提交于 2019-11-29 12:50:19
I recently played around with html5 and came across the idea to use a fullscreen video as the websites' background using the following html-code: <video id = "video_background" preload = "auto" autoplay = "true" loop = "loop"> <source src = "videos/football.mp4" type = "video/mp4" /> </video> Additionally, I used the following css-code to align it properly: #video_background{ position: absolute; bottom: 0px; right: 0px; min-width: 100%; min-height: 100%; max-width: 4000%; max-height:4000%; width: auto; height: auto; z-index: -1000; overflow: hidden; } It's working pretty well, but I would like