css-position

问题 I want to do something like this: .cont{position:relative;display:inline-block;} .cont:nth-child(2) {left:-1px} .cont:nth-child(3) {left:-2px} .cont:nth-child(4) {left:-3px} .... .cont:nth-child(n) {left:-5px} I want to collapse the right div of each cell. Something similar to this question : collapse border + change the color of the border on hover + border radius? My HTML: .main {display:inline-block;border:1px solid #000} <div class="main"> <div class="cont">abc<div> <div class="cont">def

问题 I am having a strange css positioning issue in chrome only. I have a menu <ul> for navigation that sometimes gets pushed down randomly. Refreshing the page always fixes the problem. Strangely, sometimes if I refresh the page when it is being displayed correctly it gets pushed down. This is how it is supposed to look, and it does about half of the time: And this is what happens when it gets pushed down for some reason. The site is live, and you can experience the problem for yourself here. It

问题 I have created a slider using jquery and the slides plugin. I wanted to create an effect where it looks like the slider is circular shaped, so I positioned an image with a transparent circular center absolutely above the slider, with a higher z-index. You can see a working example here: http://vitaminjdesign.com/example/examples/Standard/index.html The problem I have having is that you cannot click on anything within the slider, because of the "mask image" which has a higher z-index than the

问题 I have created a slider using jquery and the slides plugin. I wanted to create an effect where it looks like the slider is circular shaped, so I positioned an image with a transparent circular center absolutely above the slider, with a higher z-index. You can see a working example here: http://vitaminjdesign.com/example/examples/Standard/index.html The problem I have having is that you cannot click on anything within the slider, because of the "mask image" which has a higher z-index than the

问题 I will go straight to the point. I have a child div that has width of 100% and it is located under wrapper that has a fixed width.I was wondering how can i make the child div "break out" and have 100% full screen page width. Code goes like this, i tried playing with relative/absolute positioning but no luck. <div class="wrapper"> ...Some other code... <div class="banners"> <div class="first"><img src="http://placehold.it/200x200"></div> <div class="second"><img src="http://placehold.it

问题 Here is the Problem: Lets say I have something like this: <div id="leftcontainer"> <div id="top" style="position:fixed"></div> <div id="below"></div> </div> And I would like to have the #below div, below the #top div, but not use margin-top, since the #top div will have different sizes. Also, the #below div can vary in size, and should scroll beneath the #top div. Does anybody have an idea how to realize that? Greets - Chris 回答1: This is fairly simple with jQuery if the top div's height is

问题 I've written an example here http://jsfiddle.net/R9Lds/ I want a header bar on the top of the page. <p style="vertical-align: middle; color: white">Head Bar</p> And when user scrolls down and up, the header bar will always be on the top. But now it has an issue that the bottom of the page will be cut-off. Just like the example above, the "Title 3", "Content 3.", "Author: Alex" will be cut-off. Anyone has any ideas about this issue? Thanks in advance. Eric 回答1: You actually can achieve it

问题 I took the polymer demo messages example, put it into a jsbin and then edited it to pull out the list and fab into a separate polymer element. In other words pretending that we wanted to make the inbox editor a reusable component. This more closely resembles my application, as I have broken it into many such components to make it more modular (one of the great benefits of web components IMO). As the fab is part of this new element then leaving it position absolute puts it at the very bottom

问题 I have a interesting problem with position: fixed in Opera Mobile 11: Test page: http://dl.dropbox.com/u/841468/testcase/opera/fixed.html The red <div> should stay fixed on top. If I scroll page down, element moves a bit from top edge of viewport (exactly 93px in device pixels); but if I scroll up, element returns to correct position. (Screenshot on HTC Desire): My findings: Changing zoom level didn't help and didn't change element position from top edge. It works correctly in Opera Mobile

问题 I need a modal page with no full size (80% width, <60% height, centered) to select some items, like an alert control. How to implement the CSS for this case? 回答1: Initialize modal with cssClass let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' }); Then add CSS to the class in app.scss .select-modal { background: rgba(0, 0, 0, 0.5) !important; padding: 20% 10% !important; } Change the numbers according to your design. 来源： https://stackoverflow.com