Search code examples
csspositioningfixedabsolute

Absolutley position an element inside a fixed positionparent


I have an div which is fixed with its parent div, in that fixed div i am trying to absolutley position an image, but the css for that image is not doing anything at all. The image shows up in its natural position and I can't move it!

html

<div class="wrapper">
   <div class="poster">
      <div class="posterfixed">
          <div class='18logo'>
             <img src='../images/siteimages/18logo.png' />
          </div>
       <div>
    </div>
 </div>

css

.wrapper{
  width:1280px;
  position:relative;
  border-left:1px solid #ffffff;
  border-right:1px solid #ffffff;
  margin: 0 auto 0 auto;
  background:#000000;
  overflow:hidden;
}
.poster{
float:left;
margin:-890px 0 0 890px;
width:390px;
min-height:512px;
}

.posterfixed{
  position:fixed;
  width:390px;
  min-height:512px;
  background-image:url(../images/siteimages/background.png);
}

.18logo{
  position:absolute;
  right:10px;
  top:360px;
}

Thanks for looking....................


Solution

  • You should start your class names with a letter instead of a number like you have for .18logo - as you can't start a class name with a number, or a hyphen followed by a number in CSS.

    From the 2.1 Spec, Syntax and Basic Data Types:

    In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".