positioning | 易学教程

scroll then snap to top

阅读更多关于 scroll then snap to top

问题 Just wondering if anyone has an idea as to how I might re-create a nav bar style that I saw a while ago, I just found the site I saw it on, but am not sure how they might have gotten there. Basically want it to scroll with the page then lock to the top... http://lesscss.org/ 回答1: Just do a quick "view source" on http://lesscss.org/ and you'll see this: window.onscroll = function () { if (!docked && (menu.offsetTop - scrollTop() < 0)) { menu.style.top = 0; menu.style.position = 'fixed'; menu

Whats the CSS to make something go to the next line in the page? [closed]

阅读更多关于 Whats the CSS to make something go to the next line in the page? [closed]

How can I make an element automatically be positioned on a new line in the page? In HTML I could use <br> , but how do I add something like a line-break in CSS? Say I have the following code for example: <p>Lorem ipsum dolor sit amet, <span id="elementId">consectetur adipisicing elit.</span> Magni totam velit ex delectus fuga fugit</p> The span is still positioned on the same line as the rest of the text. How can I move the span text on a new line purely through CSS? Another example is when using display: inline-block or float : <div class="smalldiv">Lorem ipsum dolor sit amet</div> <div class

How to center an image horizontally and align it to the bottom of the container?

阅读更多关于 How to center an image horizontally and align it to the bottom of the container?

问题 How can I center an image horizontally and aligned to the bottom of the container at the same time? I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time. Here is what I have: .image_block { width: 175px; height: 175px; position: relative; margin: 0 auto; } .image_block a img { position: absolute; bottom: 0; } <div class="image_block"> <a href="..."><img src=".

Why z-index is not working for div?

阅读更多关于 Why z-index is not working for div?

I am trying to get my footer to show on top of the footer background, but z-index seems not to be working. Does anyone see what is wrong with it? http://jsfiddle.net/f2ySC/ You have to explicitly define the position property: .footerBox { background-color: #FFFFFF; border: 10px solid #DDDDDD; margin: 10px 0 -200px -10px; width: 1185px; z-index: 1000; position:relative; } http://jsfiddle.net/f2ySC/1/ This brings the footer into the current stacking context : ... The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including

CSS min-width property is not functioning

阅读更多关于 CSS min-width property is not functioning

I have following problem: I have div containing other elements and I try to make its width dependent from the content. I also restrict maximum width of this div. I use min-width and max-width in CSS, but it seems that min-width is not working. The width of div is always the max-width value, no matter what the content is. Example: I'd like to have the white div (that is main div, I was talking about) strictly around the form that is in it, without empty spaces on the left and right side. I gave the form style max-width:500px to show that even if content is small, the main div stays the same.

How to select options overlapping an absolute positioned DIV?

阅读更多关于 How to select options overlapping an absolute positioned DIV?

I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few <select> elements in the page which is placed above the tooltip element. In normal case the tooltip div will appear over the select tag. But when a user clicks on select tag and the options are shown, it overlaps the tooltip. Giving a higher z-index for select or options tag did not work. Here is a sample code to illustrate the problem. <body> <h1>Select Options Overlapping Absolute Positioned DIV</h1> <select name="some-name"> <option>United States</option

CSS centering tricks [closed]

阅读更多关于 CSS centering tricks [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. My favorite equation for centering an xhtml element using only CSS is as follows: display: block; position: absolute; width: _insert width here_; left: 50%; margin-left: _insert width divided by two & multiplied by negative one here_ There's also the simpler

Position by center point, rather than top-left point

阅读更多关于 Position by center point, rather than top-left point

Is it possible to tell the code to position by the center point of an element, rather than by the top-left point? If my parent element has width: 500px; and my child element has /*some width, for this example let's say it's 200px*/ position: absolute; left: 50%; one would assume that based on the 50% positioning, the child element will be in the middle of the parent, leaving 150px of free space on each side. However, it is not, since it is the top-left point of the child that goes to 50% of the parent's width, therefore the whole child's width of 200px goes to the right from there, leaving

How to center an image horizontally and align it to the bottom of the container?

阅读更多关于 How to center an image horizontally and align it to the bottom of the container?

How can I center an image horizontally and aligned to the bottom of the container at the same time? I have been able to center the image horizontally by its self. I have also been able to align the bottom of the container by its self. But I have not been able to do both at the same time. Here is what I have: .image_block { width: 175px; height: 175px; position: relative; margin: 0 auto; } .image_block a img { position: absolute; bottom: 0; } <div class="image_block"> <a href="..."><img src="..." border="0"></a> </div> That code aligns the image to the bottom of the div. What do I need to add

CSS issue, when filling in a form the header goes up

阅读更多关于 CSS issue, when filling in a form the header goes up

问题 I have a strange CSS issue, I'm not quite sure how to fix this. When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this. Any ideas? Thanks! Here is some code: The form: .tooltip-wrap { position: fixed; display:none; } .tooltip-wrap .corner { position:relative; z-index:100; margin-left:-5px; width:0; height:0; border:5px solid transparent; border-bottom-color:#fff; } .tooltip-text { float:left; margin