Do similar heading tags need to be on the same DOM level to best optimize for SEO, or does it not matter at all how deeply nested and positioned they are as long as they are in proper sequential order?
For instance, this is what I imagine to be best:
<h3>...</h3>
<div>Content related to previous h3</div>
<h3>...</h3>
<div>Content related to previous h3</div>
But for styling purposes I may need to structure html this way (or even more nested):
<div>
<h3>...</h3>
<div>Content related to previous h3</div>
</div>
<div>
<h3>...</h3>
<div>Content related to previous h3</div>
</div>
You can structure your HTML either way. Search engines don't care much about your tag structure. Google seems to pay more attention to how the page renders these days than to what tags you use. The text that ends up big and prominent gets relevancy weight more than what is in heading tags. Google has never cared that sites use valid or clean HTML code. Google has always tried to index all sites that are usable rather than only those that meet any technical standard.
Even for semantic correctness, either way is fine. Here is the relevant section of the HTML spec: 4.4.11 Headings and sections — HTML5: Edition for Web Authors
It says that only sectioning roots make any difference to how your heading tags are interpreted. You can use any structure of <div> or <span> without changing the outline structure of your page. Only <blockquote>, <body>, <details>, <fieldset>, <figure>, or <td> matter when determining the scope of heading tags.