css-position | 易学教程

Make parallaxed element completely opaque

阅读更多关于 Make parallaxed element completely opaque

问题 I have the following HTML structure: <section class="mysection"> <div class="parallax"> <div> <svg></svg> </div> </div> </section> <section class="back"> <div class="triangle"> <img src="img/red-triangle-bkgrd.png"> </div> </section> This is the CSS in LESS: .parallax{ width: 90%; margin-left: auto; margin-right: auto; } section.back { .triangle { position: relative; img { position: absolute; right:0; top: 0; } } } Before using parallax on the parallax , back just sits immediately below the

Css position absolute leaves white space at the top

阅读更多关于 Css position absolute leaves white space at the top

问题 I want to absolute position a div but it is not sticked to the top but has a blank space. Container has position:relative and inner block has position:absolute css rules. I tried to play with the code and noticed that changing background-position has some effect and I have no idea why. <header> <div class="header-wrapper"> <div class="header-slogan-1 text-center">Base info</div> <div class="header-info">Info</div> </div> </header> What I want is to have the green block at the top (see fiddle)

Fixed header and a responsive website issue

阅读更多关于 Fixed header and a responsive website issue

问题 I have been trying to create a website with a fixed header but which is also responsive. Here is what I have so far. I would stick it in a jsfiddle but you can't see what I am trying to explain. The .css is in the .scss format as the .css is compressed. HTML : <title> Skinny Beer </title> <meta name="description" content="/"> <meta name="author" content="Josh Hornby"> <meta name="author" content="@joshua_hornby"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum

How does relative and absolute positioning work with embedded divs?

阅读更多关于 How does relative and absolute positioning work with embedded divs?

问题 I need to position div s within div s, and I am getting crazy. I've read many docs on the net, but I am still not clear about behavior of relative and absolute positioning when div s are embedded. Someone came up with the following: The best way I've found to understand absolute positioning is that position:relative looks "downstream" to child elements and position:absolute looks "upstream" to parent elements. That is, when you tell an HTML element to be absolutely positioned, it's going to

Giving height to absolutely positioned DIVs in IE6

阅读更多关于 Giving height to absolutely positioned DIVs in IE6

问题 It's almost 2010 and I'm still dealing with IE6 bugs. sigh . So, here's a new one (to me) that I'm having trouble finding a answer to via google. I'm creating a DIV with an inner-shadow. The div needs to be flexible in width and height. To accomplish this, I'm giving the DIV a background image of the inner-shadow. I then add 3 additional absolutely positioned divs within for the other 3 corners (top right, bottom right, bottom left) and give them each heights so they overlap. This works great

How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?

阅读更多关于 How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?

问题 Suppose an example: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <style type="text/css"> html, body { height:100%; width:100%; padding:0; margin:0; } body { overflow:scroll; } #wrapper { background:#5f9ea0; width:500px; height:100%; min-height:100%; margin:0 auto; overflow:auto; } #content { background:#336699; width:400px; height:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;} #info-block { background:#d2691e; width:300px; left:20px; position

CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE

阅读更多关于 CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE

问题 I have this situation: https://jsfiddle.net/rozkvsdh/5/ A CSS Grid, simply, but in some items, I need to put a ribbon or another div. It's impossible! How can I do? grid-item { background-color: lightgreen; display: flex; justify-content: center; align-items: center; } .ribbon-wrapper { width: 85px; // the length should be not in px I think! height: 88px; // the length should be not in px I think! overflow: hidden; //position: absolute; it doesn't work! position: relative; top: -3px; left:

Header is disappearing when the position is fixed

阅读更多关于 Header is disappearing when the position is fixed

问题 When I set position:fixed to my header, it disappears, and I cannot figure out why. Here is my code: html, body { height: 100%; width: 100%; margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } #header { position: fixed; } #header-title { float: left; } #header-navigation { float: right; } .content-container { width: 100%; columns: 3; -webkit-columns: 3; /* Safari and Chrome */ -moz-columns: 3; /* Firefox */ column-gap: 0px; -moz-column-gap: 0px; -webkit-column-gap

Why does “position: relative” interfere with “transform: scale”?

阅读更多关于 Why does “position: relative” interfere with “transform: scale”?

问题 Given the following markup and style div { width: 300px; height: 50px; border: 1px solid black; display: inline-block; transition: all .1s ease-in-out; background-color: white; padding: 0px 5px; } div:hover { transform: scale(1.2); } label { /*position: relative;*/ } <div> <label>some random text</label> </div> <div> <label>some random text</label> </div> when hovering over the first div some letter from the second div are being "hidden" under the scaled element. When, however, position:

Fixed element inside flexbox item

阅读更多关于 Fixed element inside flexbox item

问题 I have a fixed element in a left sidebar. The left sidebar is an item of a flexbox. When I apply position:fixed; to the fixed element, the flexbox item containing it collapses and my fixed element undesirably overlaps my page content. I've tried using position:sticky; top:0; instead however the sticky element undesirably clings to the top of page. I'm unable to apply a margin. body { margin: 0; } header { border-bottom: 1px solid; } footer { border-top: 1px solid; } #content { display: flex;