Clever Geek Handbook

CSS relative element prevents floating

Code: 

<style>
div {
  width: 500px;
}

ul {
  list-style-type: none;
  line-height: 1.25em;
}

ul > li {
   position: relative;
}

ul > li:before {
  content: "\2022";
  position: absolute;
  font-weight: bold;
  font-size: 30px;
  line-height: inherit;
  left: -0.75em;
}
</style>
<div>
<span style="float:right"><a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a><br/>
<a href="http://google.com">Test link</a></span>
<ul>
<li>The <a href="http://google.com">glowing steel</a> is extremely hot and will harm anyone that touches it. Jumping into the slag bucket is an instant death, regardless of [[Damage Threshold]].</li>
<li>The ''"Lucky 38 Executive Override"'' option on the terminal on the second level was originally supposed to be part of the quest [[The Moon Comes Over the Tower]], but that section was cut. See that quest notes section for details.</li>
<li>The three Mr. Steels found inside, as well as the fiends, respawn every three game days.</li>
</ul>
</div>
Run codeHide result


In the example above, the links are not available. Is this the intended behavior of CSS? Are there any correct fixes?

So far I have come up with a few inferior solutions:

  • Make all elements float position:relative

    and z-index:1

    : Obviously this is not a good general solution.
  • Overflow:hidden

    in item ul

    : links are available, but list items no longer wrap around floats.
  • Overflow:hidden

    in item li

    : links are available, list items are wrapped around floats. But the content :before

    becomes invisible.
  • z-index: -1

    to li

    : links in floats become available in exchange links in a list becoming unavailable.

And, after some further thought, I ended up providing all the :link

elements position:relative

and z-index:1

. Not perfect, but I think this is the one with the least flaws.

+3


source to share


1 answer


Can you wrap all your links in a div and set this wrapper with this style:

.link-wrapper{
   position:relative;
   z-index:9;
}

Like in this fiddle .

UPDATE

Another possible solution might be to set z-index

yours <li>

to something below 0. Like this:

ul > li {
   position: relative;
    z-index:-1;
}

Here is a fiddle .



UPDATE 2

Here's another possible solution that involves setting up a negative margin and using a transform for your content :before

. This is a bit of a hack, but I might work for your situation.

Add these styles:

ul > li:before {
  display:inline-block;
   margin-left:-20px;
   margin-right:10px;
   transform:translateY(5px);
}

And remove this style:

ul > li {
    position:relative;
}

Here is a fiddle .

+2


source






More articles:


All Articles