css-position

I'm trying to see if it is possible to put some text over an image without using position: absolute or having the image being, the background of an element. The reason for the constraints is that the HTML code is going into an e-mail, and it turns out that hotmail supports neither. I remember that when I first began studying CSS, fiddling around with float-ing text around images I often ended up with the text merrily going all over the image. Sadly, I can't reproduce that behavior. Full story (edited in): I received a fancy layout from the graphics designer. It's basically a nice background

How do I verically center the content of floating div (which height I don't know)? There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/ ) <div class="floating"> This should be in the middle </div> ​ .floating { height: 100px; float: left; border: 1px solid red; vertical-align: middle; } ​ How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display: table-cell and it didn't work either. What's the best way to solve this issue? I'd like to avoid

position: sticky works on some mobile browsers now, so you can make a menu bar scroll with the page but then stick to the top of the viewport whenever the user scrolls past it. But what if you want to restyle your sticky menu bar slightly whenever it's currently 'sticking'? eg, you might want the bar to have rounded corners whenever it's scrolling with the page, but then as soon as it sticks to the top of the viewport, you want to get rid of the top rounded corners, and add a little drop shadow underneath it. Is there any kind of pseudoselector (eg ::stuck ) to target elements that have

My layout is fairly simple, a repeating background element, a couple of vertical spaces (roads) and some horizontal bridges and a little car which should drive underneath them when you scroll. Everything works just fine on my Mac but on iOS devices —my testing devices are: iPhone 4 on iOS 6.1, iPad 2 on iOS 6.1.3— the z-index isn't being honoured when the scroll event is active. This means that as you scroll, the car, which is position: fixed to the window , is moving over the bridge (which has a higher z-index than the "car") rather than the z-index making the bridge higher as it should be

I have two anchors positioned absolute on top of an image, the links are clickable in other browsers (Chrome, FF, Safari) but not in IE (tested in 8 & 9 so far) The strange thing is if I give the links a background-color they are clickable, however if the background-color is set to transparent ( which is what I want ) they are no longer clickable, I've also tried setting zoom:1 but no luck. I guess the hasLayout bit in IE went away with IE 8/9 so guessing zoom doesn't matter now for this kind of issue. Any ideas to make these links show up in IE 8/9 with a transparent bg? Here's the fiddle I

I have an element that I am making sticky with position sticky: #header { position: sticky; width: 100vw; top: 0; } <app-header id="header"></app-header> And that works fine, but I realised that if I use: body { overflow-x: hidden; } That breaks sticky, and I need to set body overflow-x to hidden , how can I fix that, with only CSS solution, no JS solutions? UPDATE: This has been successfully tested on Safari v12.0.2, Firefox v64.0, and Chrome v71.0.3578.98 Added position: -webkit-sticky; for Safari. Unfortunately the spec is not too clear about the implications of overflow-x: hidden; on

I'd like to create a header on the page that doesn't move when you scroll the page. This seems simple, just add "position: fixed" to the style, but then the content appears underneath the header, because the header is "removed from the flow". So the solution I think is to add "margin-top: height" to the content. Whats the best way to solve this when the height of the header is variable? I've got a fiddle that demonstrates the problem: http://jsfiddle.net/waterlooalex/j4Z8F/2/ Providing your browser window is not too large, the content text will scroll below the 'hello world header', the