Incorporated three columns using the bootstrap framework. Within the second column, there exists a div containing text which I aim to relocate to the top left corner of the document (rather than the parent's top left corner).
Due to constraints imposed by software limitations, I am unable to insert a div ahead of the columns or apply jQuery or JavaScript. My only recourse is to introduce custom CSS exclusively.
To illustrate, envision the purple div residing in the space indicated by the leftwards arrow: https://i.sstatic.net/ul8wR.png
Despite efforts involving position absolute, my attempts proved fruitless. The code snippet is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
// Additional markup omitted for clarity
</head>
<body>
// More content removed for brevity
</body>
</html>
.section-topleft{
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
Avoiding position fixed, I harbor skepticism if achieving this objective is within reason. Validation has not affirmed success.
Encounter obstacles with actual deployment
Delve into the associated css for the "test" class div—envisioned at the top left corner
Peering at the HTML content pertinent to the third row:
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
// Markup belongs here
</div>
<div class="col-md-9">
<div class="main-content">
// Relevant content placed here
</div>
</div>
</div>
Browse through the provided CSS details below:
// Comprehensive stylesheet declaration presented here