CSS voor vast beeld om menu te overlappen

Ik heb deze afbeelding:

triangle

Here is the website http://maximearchambault.com

Je hebt het menu aan de linkerkant en de inhoud aan de rechterkant.

Wat ik zou willen doen is om de driehoek naast het menu te plaatsen die de inhoud overlapt, zodat het eruit ziet als een deel van het menu.

Here a example: http://www.shockblast.net/marla-singer-photography/

Wanneer u naar beneden scrolt, ziet u een oog verschijnen en gaat alles eronderdoor. Het oog beweegt niet.

Dus ik wil dat mijn afbeelding wordt uitgelijnd met links overlappende inhoud in de rechterkolom.

Hier is mijn standaard/style.css

*/

 body {
    font-size: 13px;
    font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
    background: #fff;
    color: #000;
    line-height: 1.3em;
    /* font-weight: 300; */
}

/* link scheme */
/* you can customize links further down the page too */
a:link { text-decoration: none; color: #000; }
a:active { text-decoration: none; color: #00cc00; }
a:visited { text-decoration: none; color: #999; }
a:hover { text-decoration: underline; }
a img { border: none; }

/* general styles */
small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* headings */
h1 { font-size: 13px; margin-bottom: 1em; font-weight: bold; }
h2 { font-size: 13px; margin-bottom: 1em; font-weight: bold; }
h3 { font-size: 13px; margin-bottom: 1em; }
h4 { font-size: 13px; margin-bottom: 1em; }

/* paragraph width */
#index p { margin-bottom: 1em; }
#exhibit p, code, blockquote { width: 450px; margin-bottom: 1em; /* line-height: 1.3em; */ }

/* highlighter style - maybe you want to change colors? */
.highlight { background: #ccff00; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing */
/* think #index .container and #exhibit .container for only padding adjustments */
#index { width: 215px; background: #F2F2F2; /* line-height: 1.3em; */ }
#exhibit { margin: 0 0 0 215px; }

/* styling the index */
#index ul { list-style: none; margin: 0; }
#index ul.section { margin-bottom: 1em; }
#index ul.subsection {  }

/* the follow rules for index are not required */
/* they are mostly for complex customization */
/* for tag display */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a {  }

/* active section title */
#index span.active_section_title,
#index span.active_section_title a { font-weight: bold; }

/* active exhibit title parts */
li.active a:link, li a.active, li.active a:hover, li a.active, li.active a:active, li a.active, 
li.active a:visited, li a.active, li span.active, #index ul.section li.active a:link, 
#index ul.section li.active a:hover, #index ul.section li.active a:active, #index ul.section li.active a:visited
{ font-weight: bold; }

/* additional #index options */
#index ul li .password a { /* background: url(../img/locked.gif) right center no-repeat; padding-right: 18px; */ }

/* the "new" indicator */
#index ul li sup { color: #0c0; font-weight: bold; text-transform: uppercase; font-size: 8px; vertical-align: top; }
/* end styling for index */

/* links styles only for the #index region */
#index a:link {  } 
#index a:hover {  } 
#index a:active {  } 
#index a:visted {  }

/* links styles only for the #exhibit region */
#exhibit a:link {  } 
#exhibit a:hover {  } 
#exhibit a:active {  } 
#exhibit a:visted {  } 

/* this is where you adjust your paddings for #index and #exhibit together */
.container { padding: 27px 9px 25px 27px; }

/* this is where you pad them separately */
#index .container {  }
#exhibit .container {  }
0
Iemand alstublieft bewerken om het begrijpelijk te maken.
toegevoegd de auteur SVS, de bron
@SVS-bewerkingen moeten zichtbaar zijn bij peer review :)
toegevoegd de auteur JoeJ, de bron

1 antwoord

Zet deze eigenschappen op het element dat u wilt herstellen:

  .fixedElement
  {
        position: fixed;
        z-index: 10;
        top: 20px;
        left: 20px;
  }

Op deze manier wordt het altijd links bovenaan opgelost. zelfs na scrollen

1
toegevoegd
Deze CSS-klasse is voor elk element dat links bovenaan een pagina moet worden geplaatst en daar blijft staan ​​... u moet een afbeelding toevoegen met zoiets als dit:  je kan het overal op de pagina plaatsen
toegevoegd de auteur AhHatem, de bron
Bedankt voor de code, maar ik ben een beginner. Eerst heb ik de code nodig om de afbeelding te plaatsen en waar de code moet worden gepasseerd
toegevoegd de auteur Maxime Archambault, de bron