Search code examples
csshtmlhyperlinkfixed

Problems with divs and <a>

I'm having a weird problem (never happened to me before) with a simple site I'm developing for a client.

I have 3 DIVs in fixed position, the first one set as background, the second one on top of this one and the last one is hidden (I'm going to put a sample at the bottom).

<body>
  <div class="bg"></div>
  <div class="content">
    <h1>Some Text</h1>
    <p>Another text...</p>
    <div class="cf">
      <a href="#popup">A button</a>
      <a href="tel:000">A call</a>
    </div>
  </div>
  <div id="popup"><p>Here some content</p></div>
</body>

The problem is that appears several errors, or maybe are the same all, but P and A are not selectable, when I try to click on A #popup should appear but I can't press it. When I try to select the text, everything just disappear.

The problem is like when you try to do something on your windows computer but this is slow and leaves a "shadow" behind when you move it and to erase that "shadow" you have to move again the window. You got the idea?!

Which is weird is that this problem only appears on chrome.

Any idea what happened?!

Solution

  • Add position:relative to .izq, .der and p:

    jsFiddle example

    .izq, .der {
    float: left;
    display: inline-block;
    position:relative;
}