css-position | 易学教程

CSS shorthand for positioning

阅读更多关于 CSS shorthand for positioning

There are any shorthand for top right bottom left or for width and height ? I have a lot of css like this #topDiv { position:absolute; top:0px; left:0px; right:0px; height:100px; } #centerDiv { position:absolute; top:100px; bottom:120px; left:0px; right:0px; } #consoleDiv { position:absolute; left:0px; right:0px; bottom:0px; height:120px; } I would like to do anything like this position: absolute 10px 50px 50px 100px; or size: 400px 200px; No short-hand exists to combine all of these values. These are all different properties, unlike, for instance background , which has colors, images,

Browsers scrollbar is under my fixed div

阅读更多关于 Browsers scrollbar is under my fixed div

i have a fixed header with 100% width. #header { background: #2e2e2e; width: 100%; z-index: 999; position: fixed; } browsers scrollbar is under my fixed div. How to fix that? its because the overflow-x: hidden; in base.css line number 9 body { color: #444444; font: 13px/20px Arial,Helvetica,sans-serif; overflow-x: hidden; // remove this } This can be solved by adding overflow of body from overflow:auto; to overflow:auto; overflow:initial; This is your issue If your scroll is set on body, if its structured as body > wrapper > header (with fixed position), content so on below is your solution

How to get a scrollbar in a div with fixed header and footer?

阅读更多关于 How to get a scrollbar in a div with fixed header and footer?

问题 I have an website and some problems with the scrollbar. What I want I can best explain with this image. But I can't get the scrollbar like this. I have tried some, here is the jsfiddle In this fiddle I also have: div[role="main"] { overflow-y: scroll; margin: 60px 0; } But this margin is not OK, how do I know what margin I need without knowing the header and footer height. 回答1: This can be slowed by using padding and box-sizing = border-box on body ( with body height 100% it will count

Flip vertically a background-image every time it repeat-y

阅读更多关于 Flip vertically a background-image every time it repeat-y

问题 I'm searching for a trick that repeat my background image vertically, but every time the image is repeated I want to flip it vertically. I tried all the things in my mind with repeat-y but I don't found a solution, even searching for it in google. Example: Straight background-image Flipped background-image when it repeat-y And then flipped again to straight There is a method to obtain that position? I'll accept the solution in JScript (and library of it) only if there isn't a solution with

Is there anything wrong with positioning all elements relatively?

阅读更多关于 Is there anything wrong with positioning all elements relatively?

问题 Often I find myself attaching a class to an element just to give it position: relative; so that I can position it's children using position: absolute; Would there by anything wrong, or should I say, would anything break if I was to write: * { position: relative; } or perhaps the below example, as these are usually the only elements I require the relative positioning on: div, navbar, footer, section, aside, header, article { position: relative; } According to W3schools, all elements are

Using a JPanel with a null layout

阅读更多关于 Using a JPanel with a null layout

问题 So I have a class called CalendarPanel that extends JPanel . It uses a null layout. How would I use CalendarPanel as a regular component? When I put it in another JPanel and then add it to a window, it disappears. It is only visible when I add it directly to a window. EDIT: And yes, I realize using a JPanel with a null layout is bad practice. CalendarPanel is actually someone else's code, and I'm trying to use it for my purposes without having to refactor it. 回答1: It is only visible when I

Relatively position an element without it taking up space in document flow

阅读更多关于 Relatively position an element without it taking up space in document flow

How can I relatively position an element, and have it not take up space in the document flow? What you're trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that: <div style="position: relative; width: 0; height: 0"> <div style="position: absolute; left: 100px; top: 100px"> Hi there, I'm 100px offset from where I ought to be, from the top

css - parent's position is absolute and child's position is relative and vice versa

阅读更多关于 css - parent's position is absolute and child's position is relative and vice versa

问题 I have div which hosts another div. Ok, I get the case when the parent is position:relative and the child is position:absolute . I don't get what happens when parent's position is absolute and child's position is relative parent's position is absolute and child's position is absolute parent's position is relative and child's position is relative I use the JSbin example from Why does an absolute position element wrap based on its parent's right bound? but the question applies to positioning

center aligning a fixed position div

阅读更多关于 center aligning a fixed position div

I'm trying to get a div that has position:fixed center aligned on my page. I've always been able to do it with absolutely positioned divs using this "hack" left: 50%; width: 400px; margin-left:-200px ...where the value for margin-left is half the width of the div. This doesn't seem to work for fixed position divs, instead it just places them with their left-most corner at 50% and ignores the margin-left declaration. Any ideas of how to fix this so I can center align fixed positioned elements? And I'll throw in a bonus M&M if you can tell me a better way to center align absolutely positioned

Why using absolute position causes the div to be on top?

阅读更多关于 Why using absolute position causes the div to be on top?

Please see this very simple snippet to illustrate my question below: #container { position: relative; padding: 20px; border: 2px solid gray; } #back { position: absolute; top: 0; bottom: 50%; left: 0; right: 0; background-color: #bbb; } <div class="col-sm-12" id="container"> <div id="back"></div> <h1>Some Text</h1> </div> The h1 tag is after the back element, in the HTML code. As I don't change its position property, it must be static . And, as far as I know, static elements are positioned according to the flow of the page. So… Why is the absolute-positioned div is shown above its sibling h1 ?