Same div in different positions? (CSS)

Is it possible to have a CSS div with different positions? For example, I have a div style I use of开发者_如何学Pythonten, and it seems excessive to create another id each time I want a different position. Is it possible to specify within the HTML the position of the div?

Thank you.

You can pass multiple classes to a DIV. Create one class that has all of your default properties. Then create several additional classes that position the DIVs where you want them.

.defaults
{
   properties...
}
.position1
{
   top: 0;
   left: 100px;
}
.position2
{
  top 100px;
  left: 0;
}

<div class="defaults position1"></div>
<div class="defaults position2"></div>

You cannot have more than one element with the same ID. Instead of defining the position by ID use a class for the common properties and the ID for only those properties specific to the particular elements:

.positionDiv {
    width: 400px;
    height: 200px;
 }
 #div1 {
    left: 20px;
 }
 #dev2 {
    left: 40px;
 }

 <div class='positionDiv' id='div1'>first div</div>
 <div class='positionDiv' id='div2'>second div</div>

If i understand your problem correctly, you can use a class instead of an ID:

<div class="something">...</div>

.something { whatever: whatever }

I'm not sure that I understand correctly your question, but you can assign multiple classes to elements and you can specify css inline. With a combination of these techniques you can vary the position very conveniently.

Try not to use inline styling if possible. You want to separate the html from the styling for readability and maintainablity

Add extra classes to the div instead.

HTML

<div class="styled">
</div>
<div class="styled otherclass">
</div>

CSS

.styled { background: red; border: 1px solid blue; }
.otherclass { background: green }

The second line overrules only the background. So the border is inherited from the styles class

You can specify a style inline in the code:

<div style="left:10px;top:20px;">

I generally try to avoid this, though. It's easier to maintain the code if all the style is in one place.