I have a piece of code that currently works, but I'm curious to find out if there is a better way to position a DOM element on the top right of a container.
Here are the prerequisites:
1) The structure of the DOM cannot be altered.
2) The CSS code identified with original code should not be modified.
Check out the demo: http://jsfiddle.net/jBme9/1/
<div class="control-group">
<div class="controls">
<div class="prize-item">
<div class="control-group ">
<label class="control-label">Name</label>
<div class="controls">
<input type="text" class="form-prize-item-name" value="prize2">
</div>
</div>
</div>
<button type="button" class="btn" data-toggle="collapse" data-target="">
Edit
</button>
</div>
</div>
.controls button{
float: right;
position:absolute;
top:0px;
right: 0px;
}
/* original code */
.control-group {
background-color: #D9EDF7;
padding: 13px;
margin-bottom: 20px;
}
/* original code */
input {
box-sizing: border-box;
height: auto;
padding: 8px 4px;
width: 100%;
}