css
..are two things that are just not meant to be used together, at least as far as I can tell based on personal experience and several questions on Stack Overflow. You can normally account for the mobile viewport’s or browser window’s size/zoom level by the use of CSS media queries, but those don’t work at all when using pinch-to-zoom on mobile devices.
For example, here are three screenshots of an in-progress layout of this site that uses a fixed div for a sidebar, as viewed on a desktop browser.
I was trying to create a stack of overlapping cards (divs with borders) using relative positioning and z-index. However, instead of overlapping, the cards ended up looking like this:
First card
Second card
<div style="border: 1px solid black; width: 200px; height: 200px; position: relative; top: 20px; left: 20px; z-index: 2;"> First card </div> <div style="border: 1px solid black; width: 200px; height: 200px; position: relative; top: -150px; left: 50px; z-index: 1;"> Second card </div> I was flummoxed!